Почему при использовании clone() bootstrap selectpicker работает с оригиналом?

Question

[Артур Косиков]

HTML:

<div id="add_child">
<!-- тут ещё поля, с ними все ок -->
<label>Страна </label>
<select name="country[0]" class="selectpicker countrypicker form-control" data-flag="true" data-default="RU"></select>
</div>
<a href="#" class="add-child-link">Добавить</a>

JS

$(document).on('click', '.add-child-link', function(e){
       e.preventDefault();
	   var newdiv;
	   newdiv = $('#add_child').clone(true, true).insertBefore(this);
	   newdiv.removeAttr('id').fadeIn();
});

В клонированном div-е поле "переключает" опции внутри оригинального, а не свои...
Подключен этот плагин: https://github.com/mojoaxel/bootstrap-select-country

Answer 1

[Артур Косиков]

Вот решение... может кому пригодится...

$(document).on('click', '.add-child-link', function(e){
       e.preventDefault();
       var newdiv;
       newdiv = $('#add_child').clone(true, true).insertBefore(this);
       newdiv.find('.selectpicker').data('selectpicker', null);
       newdiv.find('.bootstrap-select').find("button:first").remove();
       newdiv.find('.selectpicker').selectpicker('val', 'RU');
       newdiv.removeAttr('id').fadeIn();
});

Answer 2

[Дамир]

У меня получилось так

var $newRow = $('.js-sizes-row').clone();
$newRow.find('.dropdown-toggle').remove();
$newRow.find('.dropdown-menu').remove();
$newRow.find('select').removeClass('selectpicker');
$newRow.find('.bootstrap-select').removeClass('bootstrap-select');
$newRow.appendTo('.sizes');
$newRow.find('select').selectpicker();