Select2 не работает для динамически добавленных групп форм

Question

У меня есть группа выбора внутри группы с использованием select2. Я использовал код для дублирования группы форм для создания нескольких групп форм, но поле выбора в дублированной группе форм не работает (не доступно для кликов). Пожалуйста, помогите мне исправить это.
Вот мой код:

<div class="box"> 
        <div class="form-group duplicable"> 
        <div class="row"> 
         <div class="search-box col-xs-4"> 
         <select name="Attribute" class="form-control"> 
          <option value="none">Attribute</option> 
          <option>Dimension</option> 
          <option>Weight</option> 
         </select> 
         </div> 
         <div class="col-xs-7"> 
         <input type="text" name="detail" class="form-control" placeholder="Detail"> 
         </div> 
         <div class="col-xs-1"><a class="btn btn-danger pull-right btn-del"><i class="fa fa-minus"></i></a></div> 
         <div class="clearfix"></div> 
        </div> 
        </div> 
        <p class="text-right nomargin"><a class="btn btn-primary add-feature"><i class="fa fa-plus"></i></a></p> 
</div> 

И вот мой JQuery:

$(".search-box select").select2({}); 
$(document).on('click','.add-feature', function(){ 
    $(this).parent().parent().find(".duplicable").clone().insertBefore($(this).parent()).removeClass("duplicable").find("input").val(""); 
    $(this).parent().parent().find(".btn-del").click(function(e) { 
    $(this).parent().parent().remove(); 
}); 
}); 

Answer 1

Если я правильно понимаю ваши требования правильно, вы пытаетесь скопировать HTML набор, который имеет элементы формы (select) и событие присоединенный link (delete). Если это то, что вы ищете, следующий код будет,

1. Clone элемент id=clone и назначен новый идентификатор в двух экземплярах (clone-n)
2. Дублированный select также присваивается новое имя (Attribute-n)
3. Каждый удалить ссылку удалят соответствующим вышестоящим

// add 
var counter = 0; 
$('.add-feature').on('click', function() { 
    var editElm; 
    counter ++;    // counter for cloned elements ids 
    $("#clone").clone(true) // "true" = cloned with events 
    .map(function(){ 
     editElm = $(this) 
     .attr('id','clone-'+counter)  // new clone id 
     .find('select') 
     .attr('name','Attribute-'+counter) // new select name 
     .end();  
    }); 
    $(this).before(editElm);    // add cloned item 
}); 
    // delete 
$('.btn-del').on('click',function(e){ 
    $(this).parents('.form-group').remove(); // remove cloned parent 
}); 

See demo

Answer 2

Это работает для меня:

$(".search-box select").select2(); 
    $(document).on('click','.add-feature', function(){ 
     $(this).parent().parent().find(".search-box select").select2("destroy"); 
     $(this).parent().parent().find(".duplicable").clone().insertBefore($(this).parent()).removeClass("duplicable").find(":not(select).form-control").val(""); 
     $(this).parent().parent().find(".search-box select").select2(); 
     $(this).parent().parent().find(".btn-del").click(function(e) { 
     $(this).parent().parent().remove(); 
    }); 
    });