Select2 with clone () does not want to work

Question

When I use the clone() method the elements with Select2 stop working. I have already verified that it is necessary to use the method "select2 ('destroy')", but I still can not find the problem. Anyone have any tips?

Here's the example using the select2 ('destroy') method, right after initializing the element again.

jQuery(document).ready(function($) {

    $('.consultorio').find('select').select2({
      width: '100%'
    });

    // Include new clinic group fields
    var max_fields      = 10; //maximum input boxes allowed
    var wrapper         = $(".consultorios"); //Fields wrapper
    var item            = $("#consultorio");
    var add_button      = $("#add_consultorio"); //Add button ID
    var x               = 1; //initial text box count

    $('.num-clinic').html(x);

    $(add_button).click(function(e){ //on add input button click
        e.preventDefault();
        if(x < max_fields){ //max input box allowed
          x++; //text box increment

      


          $(item).find('select').select2('destroy');
          var new_item = $(item).first().clone(true).appendTo(wrapper);

          new_item.find('input,select').val('');
          new_item.attr('id', $(new_item).attr('id')+'_'+ x );
          new_item.find('.num-clinic').html(x);
          new_item.find('input,select').each(function(){
            $(this).attr('id', $(this).attr('id')+'_'+ x );
          })


          $(item).find('select').select2({ width: '100%' });
          $('select').select2({
            width: '100%',
            // language: 'pt-BR',
            language: {
              noResults: function (params) {
                return 'Não encontramos sua localização. Por favor, tente novamente ou selecione a localidade mais próxima.';
              }
            }
          });


        }
    });

    $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
        e.preventDefault();
        $(this).parents('fieldset').remove();
        x--;
    })

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet"/>


<div class="consultorios" id="consultorios">

                <fieldset class="consultorio py-sm-4" id="consultorio">
                  <div class="form-row">
                    <div class="col-md-6">
                      <legend>Consultorio <span class="num-clinic"></span></legend>
                    </div>
                    <div class="col-md-6 text-right">
                      <a class="remove_field" href="#"><img src="<?php bloginfo('template_url'); ?>/assets/images/icon-erase@2x.png" alt="Excluir"></a>
                    </div>
                  </div>
                  <div class="form-row">
                    <div class="form-group col-md-4">
                      <label class="sr-only" for="consultorio_nome">Nome do Consultório</label>
                      <input type="text" class="form-control required" name="consultorio_nome[]" id="consultorio_nome" placeholder="Nome do Consultório">
                    </div>
                    <div class="form-group col-md-4">
                      <label class="sr-only" for="consultorio_especialidade">Especialidade</label>
                      <select name="consultorio_especialidade[]" id="consultorio_especialidade" class="required">
                        <option value="" selected>Especialidade</option>
                        <option value="Especialidade 1">Especialidade 1</option>
                        <option value="Especialidade 2">Especialidade 2</option>
                        <option value="Especialidade 3">Especialidade 3</option>
                      </select>
                    </div>
                    <div class="form-group col-md-4">
                      <label class="sr-only" for="consultorio_valor_consulta">Valor da Consulta (Exemplo: R$ 100,00)</label>
                      <input type="text" class="form-control required" name="consultorio_valor_consulta[]" id="consultorio_valor_consulta" placeholder="R$ Valor da Consulta (Ex.: R$ 100,00)">
                    </div>
                  </div>
                  <div class="form-row">
                    <div class="form-group col-md-3">
                      <label class="sr-only" for="consultorio_cep">CEP</label>
                      <input type="text" class="form-control required" name="consultorio_cep[]" id="consultorio_cep" placeholder="CEP">
                    </div>
                    <div class="form-group col-md-5">
                      <label class="sr-only" for="consultorio_bairro">Bairro</label>
                      <input type="text" class="form-control required" name="consultorio_bairro[]" id="consultorio_bairro" placeholder="Bairro">
                    </div>
                    <div class="form-group col-md-2">
                      <label class="sr-only" for="consultorio_estado">Estado</label>
                      <select name="consultorio_estado[]" id="consultorio_estado" class="estado-ajax required">
                      </select>
                    </div>
                    <div class="form-group col-md-2">
                      <label class="sr-only" for="consultorio_cidade">Cidade</label>
                      <select name="consultorio_cidade[]" id="consultorio_cidade" class="cidade-ajax required">
                      </select>
                    </div>
                  </div>
                  <div class="form-row">
                    <div class="form-group col-md-8">
                      <label class="sr-only" for="consultorio_endereco">Endereço</label>
                      <input type="text" class="form-control required" name="consultorio_endereco[]" id="consultorio_endereco" placeholder="Endereço (Ex.: Rua Alexandre Dumas, 1678)">
                    </div>
                    <div class="form-group col-md-4">
                      <label class="sr-only" for="consultorio_referencia">Ponto de Referência</label>
                      <input type="text" class="form-control required" name="consultorio_referencia[]" id="consultorio_referencia" placeholder="Ponto de Referência">
                    </div>
                  </div>
                </fieldset>

              </div>

              <button class="btn btn-primary" id="add_consultorio">+ consultório</button>

Answer 1

you have to destroy select2 first before cloning, but .select2('destroy') not works. Use this:

var cloneObj = $('.newRow tr').clone();
cloneObj.find("span.select2 ").remove();
cloneObj.find("select").select2();
$(".itemList tbody").append(cloneObj);