title: Unable to clone table row with select2 correctly
body: <p>I have a form for Invoice where I need to add items as required. On clicking on Add button on respective row the row has been appended to previous row. But Select2 not working normally after that.</p>
  
  <p>I have tried solution from SO in which destroy select before clone then again initialize it. But it is initializing two select2 after first row.</p>
  
  <pre><code>&lt;tr class="tr_clone"&gt;
      &lt;td&gt;
          &lt;div class="input select"&gt;
              &lt;select required="required" id="Item" class="items select2-hidden-accessible" name="data[Invoice][item_id][]" tabindex="-1" aria-hidden="true"&gt;
                  &lt;option value=""&gt;&lt;/option&gt;
                  &lt;option value="1"&gt;item 1&lt;/option&gt;
                  &lt;option value="2"&gt;Item 2&lt;/option&gt;
                  &lt;option value="3"&gt;Item 1+2&lt;/option&gt;
                  &lt;option value="4"&gt;Set 1&lt;/option&gt;
                  &lt;option value="5"&gt;NURSERY Books&lt;/option&gt;
              &lt;/select&gt;&lt;span class="select2 select2-container select2-container--default" dir="ltr" style="width: 231px;"&gt;&lt;span class="selection"&gt;&lt;span aria-expanded="false" aria-haspopup="true" aria-autocomplete="list" role="combobox" class="select2-selection select2-selection--single" tabindex="0" aria-labelledby="select2-Item-container"&gt;&lt;span class="select2-selection__rendered" id="select2-Item-container" title=""&gt;&lt;/span&gt;&lt;span role="presentation" class="select2-selection__arrow"&gt;&lt;b role="presentation"&gt;&lt;/b&gt;&lt;/span&gt;&lt;/span&gt;
              &lt;/span&gt;&lt;span aria-hidden="true" class="dropdown-wrapper"&gt;&lt;/span&gt;&lt;/span&gt;
          &lt;/div&gt;
          &lt;input type="hidden" id="ItemName" class="item_name" name="data[Invoice][item][]"&gt;
          &lt;input type="hidden" id="ItemName" class="item_group_id" name="data[Invoice][item_group_id][]"&gt; &lt;/td&gt;
      &lt;td&gt;
          &lt;div class="input text"&gt;
              &lt;input type="number" required="" min="0" name="data[InvoiceDetail][quantity][]" class="quantity small" id="quantity]["&gt;
              &lt;p class="quantity_a"&gt;&lt;/p&gt;
          &lt;/div&gt;
      &lt;/td&gt;
      &lt;td&gt;
          &lt;div class="input text"&gt;
              &lt;input type="text" readonly="readonly" required="" name="data[InvoiceDetail][price][]" class="price small" id="price"&gt;
          &lt;/div&gt;
      &lt;/td&gt;
      &lt;td&gt;
          &lt;div class="input text"&gt;
              &lt;input type="text" readonly="readonly" required="" name="data[InvoiceDetail][unit][]" class="unit small" id="unit]["&gt;
          &lt;/div&gt;
      &lt;/td&gt;
      &lt;td&gt;
          &lt;div class="input text"&gt;
              &lt;input type="text" readonly="readonly" required="required" id="Amount" class="amount small" name="data[Invoice][amount][]"&gt;
          &lt;/div&gt;
      &lt;/td&gt;
      &lt;td&gt;
          &lt;input type="button" class="tr_clone_add" value="Add" name="add"&gt;
      &lt;/td&gt;
      &lt;td class="remove"&gt;X&lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>Jquery Code:</p>
  
  <pre><code>$("table").on('click','.tr_clone_add' ,function() {
          $('.items').select2("destroy");        
          var $tr = $(this).closest('.tr_clone');
          var $clone = $tr.clone();
          $clone.find(':text').val('');
          $tr.after($clone);      
          $('.items').select2();      
      });
  </code></pre>
  
  <p>Result:</p>
  
  <p><a href="https://i.stack.imgur.com/GS2Ha.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GS2Ha.png" alt="enter image description here"></a></p>