Select2 does not work after cloning the entire Section

Question

After cloning an entire Section, select with Select2 no longer works. I tried to use Destroy to use Select2 in JS but it doesn’t work. Can anyone help me? It would be of great value. Thank you.

The element that I cloned is an entire Section, but you can’t put it here in the Stack Overflow editor. So, before this div that starts HTML has a Section.

HTML

<div class="row">
    <div class="col-lg-6">
        <div class="form-group">
            <label class="form-label">Telefone Principal</label>
            <input class="form-control clt fone"
                name="cltFone1"
                type="text">
        </div>
    </div>
    <div class="col-lg-6">
        <div class="form-group">
            <label class="form-label">Telefone Secundário</label>
            <input class="form-control clt fone"
                name="cltFone2"
                type="text">
        </div>
    </div>
</div>
<div class="cltInfoHide">
    <div class="row">
        <div class="col-lg-5">
            <div class="form-group">
                <label class="form-label">CPF</label>
                <input class="form-control cpf clt"
                    name="cltCpf"
                    type="text">
            </div>
        </div>
 </div>         
 <div class="row">
    <div class="col-lg-3">
       <div class="form-group">
          <label>UF</label>
          <select class="select2" name="cltUf">
             <option value="" selected disabled>Estado</option>
             <option value="1">Acre</option>
             <option value="2">Alagoas</option>
             <option value="3">Amazonas</option>
             <option value="4">Amapá</option>
             <option value="5">Bahia</option>
             <option value="6">Ceará</option>
             <option value="7">Distrito Federal</option>
             <option value="8">Espírito Santo</option>
             <option value="9">Goiás</option>
             <option value="10">Maranhão</option>
             <option value="12">Mato Grosso do Sul</option>
             <option value="13">Mato Grosso</option>
             <option value="11">Minas Gerais</option>
             <option value="14">Pará</option>
             <option value="15">Paraíba</option>
             <option value="18">Paraná</option>
             <option value="16">Pernambuco</option>
             <option value="17">Piauí</option>
             <option value="19">Rio de Janeiro</option>
             <option value="20">Rio Grande do Norte</option>
             <option value="23">Rio Grande do Sul</option>
             <option value="21">Rondônia</option>
             <option value="22">Roraima</option>
             <option value="24">Santa Catarina</option>
             <option value="26">São Paulo</option>
             <option value="25">Sergipe</option>
             <option value="27">Tocantins</option>
          </select>
       </div>
    </div>
    <div class="col-lg-9">
       <div class="form-group">
          <label>Cidade</label>
          <select class="select2" name="cltCidade" disabled>
             <option value="" selected disabled>Cidade</option>
          </select>
       </div>
    </div>
</div>

JS

$(document).on('click', '.cltAdd', function() {

    //loop through each input
    var section = $('.cltSection:first').clone(true).find("input[name='cltNome[]']").each(function(){

            $(this).closest("section").find(".cltTrash").click();
            $(this).closest("section").find("input[name='cltFone1']").mask("destroy").mask('(00) 00000-0000');
            $(this).closest("section").find("input[name='cltFone2']").mask("destroy").mask('(00) 00000-0000');
            $(this).closest("section").find("input[name='cltCpf']").mask("destroy").mask('000.000.000-00');

            $(this).typeahead({
                input: "input[name='cltNome[]']",
                order: "asc",
                minLength: 1,
                display: ["nome"],
                source: {
                    partes: {
                        ajax: {
                            url: "modules/onelex/php/autocomplete_partes.php"
                        }
                    }
                }
                ,
                callback: {
                    onClick: function (node, a, item, event) {

                        var parte = item.id;

                        node.closest("section").find(".clt").prop("readonly", true);
                        node.closest("section").find(".cltLoad").show();
                        node.closest("section").find(".cltFind").hide();

                        $.getJSON("modules/onelex/php/parte.php?valor="+parte, function (dados){

                            if (dados.length > 0) {
                                $.each(dados, function(i, obj){
                                    fone1 = obj.fone1;
                                    fone2 = obj.fone2;
                                    email = obj.email;
                                    cpf = obj.cpf;
                                    rg = obj.rg;
                                    emissor = obj.emissor;
                                    endereco = obj.endereco;
                                    bairro = obj.bairro;
                                    numero = obj.numero;
                                    complemento = obj.complemento;
                                    uf = obj.uf;
                                    cidade = obj.cidade;
                                })
                                node.closest("section").find(".clt").prop("readonly", false);
                                node.closest("section").find("input[name='cltNome[]']").prop("readonly", true);
                                node.closest("section").find(".cltTrash").show();
                                node.closest("section").find(".cltLoad").hide();
                                node.closest("section").find(".cltFind").show().css("color","green");
                            } else {
                                node.closest("section").find(".clt").prop("readonly", false);
                                node.closest("section").find(".cltLoad").hide();
                                node.closest("section").find(".cltFind").show().text("\u2219 Erro ao localizar cliente").css("color","red");
                            }

                            node.closest("section").find("input[name='cltFone1']").val(fone1);
                            node.closest("section").find("input[name='cltFone2']").val(fone2);
                            node.closest("section").find("input[name='cltEmail']").val(email);
                            node.closest("section").find("input[name='cltCpf']").val(cpf);
                            node.closest("section").find("input[name='cltRg']").val(rg);
                            node.closest("section").find("input[name='cltEmissor']").val(emissor);
                            node.closest("section").find("input[name='cltEndereco']").val(endereco);
                            node.closest("section").find("input[name='cltBairro']").val(bairro);
                            node.closest("section").find("input[name='cltNumero']").val(numero);
                            node.closest("section").find("input[name='cltComplemento']").val(complemento);
                            node.closest("section").find("select[name='cltUf']").val(uf).change();
                            setTimeout(function(){
                              node.closest("section").find("select[name='cltCidade']").val(cidade).change();
                            }, 3000);
                        })

                    }
                },
                cancelButton: false
            });





    }).end()

    .insertAfter('.cltSection:last');
});

I tried to put the

$(".select2").select2();

but it doesn’t work. ` When I do the above it happens the following error in images:

1 - Click on "Add Client" 2 - Two selects appear in the Section that I cloned. The two work the same, that is, when I click on one the other mimics the value. And the bottom one that was added doesn’t work at all, you can’t even click. I’ve even tried to put with the name of select like this:

$(this).closest("section").find("select[name='cltUf']").select2();

But it doesn’t work either. I tried to use Destroy to then call the function again like this:

$(this).closest("section").find("select[name='cltUf']").select2("destroy").select2();

But it doesn’t work either. I don’t know what it might be. I think the problem isn’t in the select itself. It’s time to clone the Section.

From now on I thank those who tried to help me here. I don’t have the solution yet. I put it here. Thank you.