bootstrap selectpicker and cloning
<p>I have been using bootstrap selectpicker where I've added an Add Button for user to replicate the button as much as he wants. Problem is, selectpicker is not working on the second / cloned element and values of dropdown are just showing and not changing on click.</p>

<p>Main Select:</p>

<pre><code>&lt;div id="main_product"&gt;
  &lt;select name="product[]" class="selectpicker" &gt;
   &lt;option value="Tube Lights" &gt;Tube Lights&lt;/option&gt;
   &lt;option value="Downlights" &gt;Downlights&lt;/option&gt;
  &lt;/select&gt;
&lt;/div&gt;
</code></pre>

<p>Clone Function:</p>

<pre><code>function clone()
{
    var $orginal = $('#main_product');
    var $cloned = $orginal.clone();

    $cloned.appendTo('#new_products');
    // $cloned.find('.bootstrap-select').remove();
    // $cloned.find('select').selectpicker();
}
</code></pre>

<p>Note that I tried to reassign the selectpicker to the cloned object which is in comments atm, because it dint work also.</p>

<p>Any help would be really appreciated.</p>