Bootstrap selectpicker is duplicated after refresh in cloned div

Question

I have a bootstrap selectpicker:

<div id="maindiv">
  <div class="hidden">
     <select class="form-control selectpicker communitySelect " multiple="true">
        <option selected value="0">All Communities</option>
     </select>
  </div>
</div>

I try to clone this hidden div and try to add/remove selectpicker options in cloned div:

 var $pickerdiv = $("div.hidden").clone();
 $pickerdiv.removeClass("hidden");
 $("#maindiv").append($pickerdiv);

 var $communitySelector = $pickerdiv.find(".selectpicker");
 $communitySelector.selectpicker();
 $communitySelector.find('option').remove();
 $communitySelector.selectpicker('refresh');

But after selectpicker refresh method it is duplicated on UI: https://jsfiddle.net/v660Lb4p/8/

So how to resolve this?

RESOLVED: Bootstrap selectpicker plugin applied automatically to elements with selectpicker class. So I removed this class and... its working now! https://jsfiddle.net/v660Lb4p/16/

Answer 1

We need to change selectpicker class to another class name so that this issue has been resolved. I also work with bootstrap-select and found this issue because of selectpicker("refresh"). so I changed class name and it is working fine. :-)

This is already reported on bootstrap-select github repository. https://github.com/snapappointments/bootstrap-select/issues/1413