Select2 dynamically added inputs not working

Question

I have a table using the multiselect from Select2, works fine. However I have a button to add a row by cloning the previous and adding a new id to the row, I am using the same the same markup for the multi-select. That one is disabled. I have tried re-initializing after the row is added but doesn't work :( Below is the html and the js.

HTML:

<select class="js-example-basic-multiple" name="selectedValues" multiple="multiple" multiple>
  <?=$displaySelectData?>
</select>

JS:

$(document).ready(function () {
  $('.js-example-basic-multiple').select2();
  var sample_row = 1;
  $('#addrow').click(function(e) {
    e.preventDefault();
    var sample_row_template = $('#sample_row_template')
      .clone()  // CLONE THE TEMPLATE
      .attr('id', 'row' + (sample_row++)) // MAKE THE ID UNIQUE
      .appendTo($('#sample_table tbody')) // APPEND TO THE TABLE
      .show(); // SHOW IT
  });
            
  $('.js-example-basic-multiple').select2();
});

the row I am cloning

<tr id="sample_row_template" style="display: none;">
    <td width="200px">
        <input class="form-control" name="sample-reference" type="text" value="">
    </td>
    <td width="150px">
        <input class="form-control" name="sample-date" type="date" value="<?=$today?>" id="example-date-input">
    </td>
    <td width="150px">
        <input class="form-control" name="sample-time" type="time" value="<?=$now?>" id="example-time-input">
    </td>
    <td >
        <select class="js-example-basic-multiple" name="selectedValues" multiple="multiple" multiple>
            <?=$displaySelectData?>
        </select>
    </td>
    <td width="200px">
        <select class="fart form-control">
            <option>Select</option>
            <option value="1">1 Day</option>
            <option value="2">2 Day</option>
            <option value="3">3 Day</option>
            <option value="4">4 Day</option>
            <option value="5">5 Day</option>
            <option value="6">6 Day</option>
            <option value="7">7 Day</option>
            <option value="8">8 Day</option>
            <option value="9">9 Day</option>
            <option value="10" selected>10 Day</option>
        </select>
    </td>
    </div>
</tr>

Answer 1

The main issue is that you are not calling .select2() after cloning the row. If you look closely, your second call to .select2() occurs outside your .click() handler, even though your whitespace makes it appear like it is inside.

One other issue is that it will be best to call .select2() on just the cloned row, not globally. In my testing if I kept the function call like you have it then any row cloned after the first ended up displaying both the select dropdown and the select2 dropdown next to each other. This code should do the trick:

$(document).ready(function () {
  var sample_row = 1;

  $('#addrow').click(function(e) {
    e.preventDefault();
    var new_row = $('#sample_row_template')
      .clone() // CLONE THE TEMPLATE
      .attr('id', 'row' + (sample_row++)) // MAKE THE TABLE ROW ID UNIQUE
      .appendTo($('#sample_table tbody')) // APPEND TO THE TABLE BODY
      .show() // SHOW IT
     ;

     // now, initialize select2 *only* on the new row that was created
     new_row.find('.js-example-basic-multiple').select2();
  });
});