After cloning an entire section, select with select2 no longer works. I already tried to use the destroy to later use select2 in JS but it does not work. Can someone help me? It would be of great value. Thank you.
The element I've cloned is a whole section, but you can not put it here in the Stack Overflow editor. So before that div that starts the 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 have tried to put the
$(".select2").select2(); but it does not work. '
When I do the above, the following error occurs in images:
1 - Click on "Add Customer"
2-TwoselectsappearinthesectionthatIhavecloned.Thetwoworkthesame,iewhenIclickoneachotherimitatethevalue.Andthebassthatwasaddeddoesnotworkanything,nortoclick. 
I'veeventriedputtingthenameoftheselectlikethis:
$(this).closest("section").find("select[name='cltUf']").select2();
But it also does not work.
I already tried to use the destroy and then call the function again like this:
$(this).closest("section").find("select[name='cltUf']").select2("destroy").select2();
But it also does not work. I do not know what it can be. I think the problem is not being in the select itself. But it was time to clone Section.
From now on I thank those who tried to help me here. I still do not have the solution. When I find out I'll post it here. Thank you.