multiple clone not working when append in select 2
<p>Can anyone please let me know what is wrong with the following code: 
<strong>HTML</strong></p>

<pre><code>&lt;div class="form-wrapper"&gt;
         &lt;div class="form-repaet"&gt;
          &lt;div class="form-group"&gt;
            &lt;select id="selecttag" name="book[0].tag" class="form-control select2 input-lg" style="width: 100%;"&gt;
              &lt;option selected="selected"&gt;Tag&lt;/option&gt;
              &lt;option&gt;1&lt;/option&gt;
              &lt;option&gt;2&lt;/option&gt;
            &lt;/select&gt;
          &lt;/div&gt;
          &lt;div class="form-group"&gt;
            &lt;select class="form-control select2" name="book[0].is" style="width: 100%;"&gt;
              &lt;option selected="selected"&gt;is&lt;/option&gt;
              &lt;option&gt;1&lt;/option&gt;
              &lt;option&gt;2&lt;/option&gt;
            &lt;/select&gt;
          &lt;/div&gt;
          &lt;div class="form-group"&gt;
            &lt;select class="form-control select2 test1" name="book[0].select_tag" style="width: 100%;"&gt;
              &lt;option selected="selected"&gt;Select a Tag&lt;/option&gt;
              &lt;option&gt;1&lt;/option&gt;
              &lt;option&gt;2&lt;/option&gt;
            &lt;/select&gt;
          &lt;/div&gt;

          &lt;div class="form-group"&gt;
           &lt;div class="btn-group m-r"&gt; 
             &lt;button data-toggle="dropdown" class="btn btn-default dropdown-toggle"&gt; 
              &lt;span class="dropdown-label"&gt;&lt;i class="ion-gear-b"&gt;&lt;/i&gt;&lt;/span&gt; 
             &lt;/button&gt; 
             &lt;ul class="dropdown-menu dropdown-select"&gt; 
              &lt;li class="active"&gt;
               &lt;a href="#"&gt;All&lt;/a&gt;
              &lt;/li&gt; 
              &lt;li&gt;&lt;a href="#"&gt;Option2&lt;/a&gt;&lt;/li&gt; 
              &lt;li&gt;&lt;a href="#"&gt;Option3&lt;/a&gt;&lt;/li&gt;  
             &lt;/ul&gt; 
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="clearfix"&gt;&lt;/div&gt;
          &lt;div class="line line-dashed line-lg pull-in"&gt;&lt;/div&gt;
       &lt;/div&gt;
</code></pre>

<p><strong>JavaScript</strong> I am using following codes for javascript</p>

<pre><code>$(document).ready(function(){
    var counter = 1;
    $("#add-form").click(function () {
        if(counter&gt;10){
                alert("Only 10 textboxes allow");
                return false;
        }
        $(".form-repaet:last").clone().appendTo(".form-wrapper");
        //$(".form-repaet:last").select2();
        counter++;
    });

     $("#removebtn").click(function () {
      if(counter==1){
          return false;
       }
        $(".form-repaet").last().remove();
        counter--;
     });
  });
</code></pre>

<p>It is creating a clone of 'form-repaet' div but the select box is not working. I've tried <code>select2();</code> after clone, but it is not working. Any help would be appreciated. Thanks so much!</p>