title: Dynamically adding checkboxes to multiselect dropdown
body: <p>I have been stuck on this problem for hours and I am going mad ! I need a dropdown of checkboxes - which I populate dynamically into a select tag. I also need to append each multiselect dropdown that I deep-clone with jquery to a number of <code>&lt;div&gt;</code> elements. However, every time I do this the cloned element is rendered as a list of multiselectable items (and not as a dropdown and loses all its styling). This is the multiselect container that I would like to add my checkboxes to:</p>
  
  <pre><code>&lt;select class="multiselect1" multiple="multiple"&gt;
  
  
  &lt;/select&gt;
  </code></pre>
  
  <p>I finally initialize each cloned dropdown by calling .multiselect(); The library I am using for this is: <a href="http://davidstutz.github.io/bootstrap-multiselect/" rel="nofollow">http://davidstutz.github.io/bootstrap-multiselect/</a></p>
  
  <pre><code>        $('.multiselect1').multiselect();
          var filterClone = $('.multiselect1').clone(true);
          //filterClone.multiselect();
          $('body').append(filterClone[0]);
  </code></pre>
  
  <p>When the above lines execute, the select element is indeed present in the body but is invisible. When I remove the style attribute the element becomes visible but is rendered as a list of multiselectable items (which is expected). But why is the cloned multiselectable dropdown not displayed at all in the first place ? </p>
  
  <p>Any suggestions that could lead me to a solution (or the solutions itself!) using javascript or jquery would be most appreciated. </p>