Selectpicker on dynamically created select

Question

i'm using bootstrap-select in a form with several selects, but i clone or create new selects with new ids and same class and use:

$(".selectpicker").selectpicker("render"); or
$(".selectpicker").selectpicker("refresh");

and the new selects doesn't get updated, i also try cloning both normal select and created bootstrap-select change ids and data-id and $(".selectpicker").selectpicker("refresh"); but this doesn't work.

How can this be done.

UPDATE

This is the basic HTML, basically i'm using Django formset, here i have a form with a table, each row is a new form instance with inputs and selects.

<tr class="dynamic-form">
 <td class="" style="text-align: center">
  <input type="number" name="caracteristicas-0-ORDER" value="1" id="id_caracteristicas-0-ORDER">
 </td>
 <td class="" style="text-align: center">
  <select name="caracteristicas-0-caract" data-live-search="true" class="form-control selectpicker" id="id_caracteristicas-0-caract" style="display: none;">
  <option value="1" selected="">Nombre</option>
  <option value="2">Ref</option>
  <option value="3">Modelo</option>
 </select>
</td>

The Javascript is basically this:

---- onClickButton ----
row = tr.clone(true); <----- this was the problem
/* clear values, change id's, etc. */
row.insertBefore(lastRow).show();
row.find('.bootstrap-select').remove();
$('.selectpicker').selectpicker("render");

Answer 1

After reading all library code, the problem was in this line:

row = tr.clone(true);

When you use clone(true) you get a copy of the element AND all events handlers etc. You need to get a clean copy of the element structure only.

So the solution is:

row = tr.clone();