Select2克隆仅适用于新元素

Question

我需要为我的工作克隆select2，在互联网上，我发现要克隆select2，您必须销毁现有元素。但是在我的情况下，销毁后select2不会显示在现有元素上。仅显示在最后一个元素上。

<div class="form-row px-0">
  <div class="col-auto pr-0 my-lg-0 my-1" style="min-width: 100%;">
    <form:select class="custom-select midSelect select-multi" id="flightList1.departure" name="flightList1.departure" path="flightList[1].departure">
      <option value="" disabled selected>Kota Asal</option>
      <form:options items="${airport}"></form:options>
    </form:select>
  </div>
  <div class="col-auto pr-0 my-lg-0 my-1" style="min-width: 100%;">
    <form:select class="custom-select midSelect select-multi" id="flightList1.arrival" name="flightList1.arrival" path="flightList[1].arrival">
      <option value="" disabled selected>Kota Tujuan</option>
      <form:options items="${airport}"></form:options>
    </form:select>
  </div>
  <div class="col-auto pr-0 my-lg-0 my-1">
    <span class="glyphicon glyphicon-calendar hasDate" aria-hidden="true"></span>
    <form:input type="text" class="form-control datepicker" placeholder="Tanggal Keberangkatan" id="flightList1-date" name="flightList1.date" path="flightList[1].date"></form:input>
  </div>
  <button class="btn btn-success btn-add mx-1" type="button">
    <span class="glyphicon glyphicon-plus"></span>
  </button>
</div>
</div>

var scntDiv = $('#clone_multicityTrip');
var i;

$('.btn-add').on('click', function() {
  var div1 = $("#clone_multicityTrip .form-row");
  i = $('#clone_multicityTrip .form-row').size() + 1;
  div1.find(".select-multi").each(function() {
    if ($(this).data('select2')) {
      $(this).select2('destroy');
    }
  });

  var $clone = $('#clone_multicityTrip .form-row:last-child').clone(true, true).appendTo(scntDiv);

  $clone.find('input').each(function() {
    $this = $(this);
    var nameclone = $this.attr("name").split('.')[0];
    nameclonereplace = nameclone.replace(/[^a-zA-Z]/g, '');
    namecloneLast = $this.attr("name").split('.')[1];
    $(this).attr('name', nameclonereplace + '[' + i + ']' + '.' + namecloneLast);

    var idclone = $this.attr("id").split('-')[0];
    idclonereplace = idclone.replace(/[^a-zA-Z]/g, '');
    idcloneLast = $this.attr("id").split('-')[1];
    $(this).attr('id', idclonereplace + i + '-' + idcloneLast);
  });

  $clone.find('select').each(function() {
    $this = $(this);
    var selectclone = $this.attr("name").split('.')[0];
    selectclonereplace = selectclone.replace(/[^a-zA-Z]/g, '');
    selectcloneLast = $this.attr("name").split('.')[1];
    $(this).attr('name', selectclonereplace + '[' + i + ']' + '.' + selectcloneLast);

    var selectidclone = $this.attr("id").split('.')[0];
    selectidclonereplace = selectidclone.replace(/[^a-zA-Z]/g, '');
    selectidcloneLast = $this.attr("id").split('.')[1];
    $(this).attr('id', selectidclonereplace + i + '.' + selectidcloneLast);
  });

  $clone.find('input.datepicker').each(function() {
    $(this).prop({
      'value': ''
    });
  }).removeData('datepicker').removeClass('hasDatepicker').unbind().datepicker();

  i++;

  scntDiv.find('.form-row:not(:last-child) .btn-add').removeClass('btn-add').addClass('btn-remove').removeClass('btn-success').addClass('btn-danger').html('<span class="glyphicon glyphicon-minus"></span>');

  scntDiv.find('select').change(function() {
    $(this).addClass('selected');
  });

  attach_delete();
  $('.select-multi').select2();

谢谢您的帮助。