Select2 input doesn't work when I add a new form input dynamically with jquery

Question

In my form, I am trying to add a new form-row when the user presses the add button.

<div class="form-row mb-2">
        <div class="form-group col-md-3 my-2">
          <label>File</label>
          <select name="fileType-0" class="js-example-basic-single form-control" required>
            <option></option>
            <option value="Invoice">Invoice</option>
            <option value="Other">Other</option>
          </select>
        </div>

        <div class="form-group col-md-4 my-2">
          <label>Select</label>
          <input name="fileName-0" type="file" class="form-control-file" multiple="false">
        </div>

        <div class="form-group col-md-1">
          <label>BTN</label>
          <button class="btn btn-primary addInput"><i class="fas fa-plus"></i></button>
        </div>
      </div>

The button works fine and the form row is added. However the select2 input doesn't work in the duplicated rows..

 $('.js-example-basic-single').select2(); var counter = 0; $('#form').on('click', '.addInput', function() { counter++; var $template = $('.form-row').slice(-1).clone(true, true).find('input').end().find('.addInput').removeClass('addInput').addClass('removeInput').end().find('[name^="fileType-"]').attr('name', 'fileType-' + counter).val("").attr('tabindex', counter).val("").end().find('[name^="fileName-"]').attr('name', 'fileName-' + counter).val("").attr('tabindex', counter).val("").end().find('i').removeClass('fa-plus').addClass('fa-minus').end(); $template.insertAfter('.form-row:last'); $('.form-control:last').focus(); }) // Remove button click handler.on('click', '.removeInput', function() { var $row = $('.form-row').slice(-1); counter--; $row.remove(); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.bundle.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.full.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" rel="stylesheet" /> <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" /> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet" /> <div class="row"> <div class="col-12"> <form id="form" role="form" enctype="multipart/form-data"> <div class="form-row mb-2"> <div class="form-group col-3 my-2"> <label>Type</label> <select name="fileType-0" class="js-example-basic-single form-control" required> <option></option> <option value="Invoice">Invoice</option> <option value="Other">Other</option> </select> </div> <div class="form-group col-5 my-2"> <label>Select</label> <input name="fileName-0" type="file" class="form-control-file" multiple="false"> </div> <div class="form-group col-1"> <label>BTN</label> <button class="btn btn-primary addInput"><i class="fas fa-plus"></i></button> </div> </div> <div class="row mb-3"> <button type="submit" class="btn btn-primary">Submit</button> </div> </form> </div> </div>

Answer 1

The problem lies in the cloning of the elements that are generated by Select2 . Those elements always refer to the select element of the first row.

Changing your script into this will fix it:

var selectTemplate = $('.form-row').slice(-1).find('select').clone();

$('.js-example-basic-single').select2();
var counter = 0;
$('#form')
  .on('click', '.addInput', function() {
    counter++;

    var $template = $('.form-row').slice(-1).clone(true, true).find('input').end()
      .find('.addInput').removeClass('addInput').addClass('removeInput').end()
      .find('[name^="fileType-"]').attr('name', 'fileType-' + counter).val("").attr('tabindex', counter).val("").end()
      .find('[name^="fileName-"]').attr('name', 'fileName-' + counter).val("").attr('tabindex', counter).val("").end()
      .find('i').removeClass('fa-plus').addClass('fa-minus').end()
      .find('.form-group.col-3.my-2 :not(label)').remove().end()
      .find('.form-group.col-3.my-2 label').after(selectTemplate.clone()).end();
    $template.insertAfter('.form-row:last');
    $('.js-example-basic-single').select2();
    $('.form-control:last').focus();
  })

  // Remove button click handler
  .on('click', '.removeInput', function() {
    var $row = $('.form-row').slice(-1);
    counter--;
    $row.remove();
  });