Can anyone please let me know what is wrong with the following code: HTML

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

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

JavaScript I am using following codes for javascript

$(document).ready(function(){
    var counter = 1;
    $("#add-form").click(function () {
        if(counter>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--;
     });
  });

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

Can anyone please let me know what is wrong with the following code: HTML

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

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

JavaScript I am using following codes for javascript

$(document).ready(function(){
    var counter = 1;
    $("#add-form").click(function () {
        if(counter>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--;
     });
  });

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

• javascript
• jquery-select2

• It is surely bad. In HTML value of ID attributes should be always unique. When you clone your form, ID's won't be uniqe. – vaso123 Commented Aug 25, 2016 at 10:15
• you need to destroy your existing select2 using the .destroy() method before you clone it. – David R Commented Aug 25, 2016 at 10:16
• sorry , it was just by mistake , I've removed it, it is cloning based on class. – Sachin Vairagi Commented Aug 25, 2016 at 10:17
• Try replacing your .clone statement to $(".form-repaet:last").select2("destroy").end().clone().appendTo(".form-wrapper"); and see. – David R Commented Aug 25, 2016 at 10:17
• @DavidR , it is throwing error - The select2('destroy') method was called on an element that is not using Select2. – Sachin Vairagi Commented Aug 25, 2016 at 10:21

2 Answers 2

Here is a working jsFiddle

First of all, add another selector to select2 elements, not select2 because that is attached to the spans what selec2 created. This is why you get that error:

The select2('destroy') method was called on an element that is not using

In my case this is xxx

And use like this:

$(".form-repaet:last").find('.xxx').select2('destroy');
var clone = $(".form-repaet:last").clone();
$('.form-wrapper').append(clone);
$('.xxx').select2();

I did not care about remove.

NOTE

In HTML all ID-s should be unique, so care about it, when you clone.

This worked for me:

before code:

addRecord($(this).closest('.glacc-detail'));

after change code:

$('.select2bs4').select2('destroy');  //added this line
addRecord($(this).closest('.glacc-detail'));
$('.select2bs4').select2();      //added this line