title: Select Element doesn't work after clone
body: <p><strong>Hi! Guys I know nothing when it comes to JQuery... Please help me with this.</strong></p>
  
  <p>I created bootstrap form with a button add another field if the user want additional input fields. The new field are cloned from the original field.</p>
  
  <p>The date-picker didn't work at first (on cloned field) so I add code to solve that.. (which I was luck to do and it took me 7hrs to get it correct)..</p>
  
  <p>but then I found out even the cloned select box aren't working also. 
  -> Since the selector was using ID (#e1), I thought that was a reason so I changed it to class (.e1). That didn't help.
  ->So I tried the same method (like how I did on date-picker) but it also failed..</p>
  
  <p>Here is the Code:
  -> At Page header</p>
  
  <pre><code>    &lt;script src="assets/js/jquery-2.0.3.min.js"&gt;&lt;/script&gt;
  
  &lt;script&gt;
  
      function cloneRow()
      {
  
          var row = document.getElementById("rowToClone"); // find row to copy
          var num = Math.floor((Math.random() * 500) + 1); 
          var table = document.getElementById("tableToModify"); // find table to append to
  
          var clone = row.cloneNode(true); // copy children too
          clone.id = "row" + num; // change id or other attributes/contents
          table.appendChild(clone); // add new row to end of table
          clone.querySelectorAll('[id="id-date-picker-1"]')[0].id = "id-date-picker-" + num;  //Put Unique ID   
  
      //For Selector
      $(function(){
  
          $('.e1').select2();
  
          $('.clone').click(function() {
  
              var clone = $('.select2').clone();
  
              var cloned = clone.find('.e1');
              cloned.removeClass('select2').removeAttr('id');
  
              clone.appendTo('.elements');
              $(cloned).select2();
  
          });
      });
  
  
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>The Row to be cloned</p>
  
  <pre><code>&lt;tbody id="rowToClone"&gt;
  &lt;tr&gt;
      &lt;td&gt;
  
          &lt;div class="form-group" style="width: 100%;"&gt;
      &lt;select class="e1" style="width:100%;"&gt;
          &lt;option value="AL" /&gt;Alabama
          &lt;option value="AK" /&gt;Alaska
          &lt;option value="AZ" /&gt;Arizona
      &lt;/select&gt;
  
          &lt;/div&gt;
  
      &lt;/td&gt;
  
      &lt;td&gt;
  
          &lt;div class="form-group" style="width: 100%;"&gt;
      &lt;select class="e1" style="width:100%;"&gt;
          &lt;option value="VA" /&gt;Virginia
          &lt;option value="WA" /&gt;Washington
  
      &lt;/select&gt;
          &lt;/div&gt;
       &lt;/td&gt;
   &lt;/tr&gt;     
  </code></pre>
  
  <p></p>
  
  <p>-> The trigger button</p>
  
  <pre><code>&lt;button type="button" onclick="cloneRow()" class="btn btn-default purple"&gt;&lt;i class="fa fa-plus"&gt;&lt;/i&gt; Add &lt;/button&gt;
  </code></pre>
  
  <p>->Page Footer</p>
  
  <pre><code>//On Page Footer
  
      //--Jquery Select2--
      $(".e1").select2(); //I added this line
      $("#e1").select2();
      $("#e2").select2({
          placeholder: "Select a State",
          allowClear: true
      });
  </code></pre>
  
  <p>-> Please help me.. I will appreciate.</p>