Good afternoon friends I have the following problem I need to clone a multiple selectpicker which I have in a DOM with an incremetable form that is inside an html table, the problem is that when I add another row the selectpicker appears twice, one that works and another clone that does not work, what I want is that when I give more, for another row, then selectpicker let me select and not clone the first row already registered
<td><label>Descripción</label>
<input type="text" name="descripcion[]" class="form-control" placeholder="Descripcion de la Actividad"/></textarea></td>
<td><label>R. Ejecución</label>
<br/>
<select class="selectpicker" name="usuario[]" data-actions-box="true" data-live-search="true" data-live-search-placeholder="Search" multiple="">
<option>
<option></option>
<?php
$query = "SELECT * FROM usuario ORDER BY nombre ASC";
$registros=mysql_query($query,$conexion) or die("Problemas en el select:".mysql_error());
while($row = mysql_fetch_array($registros)){
$usuario=$row['usuario'];
$nombre=$row['nombre'];
?>
<option value="<?php echo $usuario;?>"><?php echo $nombre;?></option>
<?php }?>
</select>
</td>
<td>
<div class="col-md-16">
<label for="exampleInputEmail1">Fecha Inicio:</label>
<div class='input-group date' id='datetimepicker5'>
<input type="text" name="fecha_inicio[]" size="12" class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<!--
<div class="col-xs-5">
<label for="exampleInputEmail1">Fecha Fin:</label>
<div class='input-group date' id='datetimepicker2'>
<input type="text" name="fecha_final[]" class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</td>
-->
<input type="hidden" name="fecha_final[]" value="<?php echo date("j-n-Y") ?>">
<td class="eliminar"><p></p><input class="btn btn-danger" type="button" value="Menos -"/></td>
</tr>
</table>
<div class="btn-der">
<button id="adicional" name="adicional" type="button" class="btn btn-info"> Más + </button>
This would be the Javascript code where I generated the clone of the form that is inside the html table where I have the problem with the selectpicker
<script>
$(function(){
// Clona la fila oculta que tiene los campos base, y la agrega al final de la tabla
clon = $("#tabla");
tr = $('tr:first', clon);
$("#adicional").on('click', function(){
tr.clone().appendTo(clon).find(':text').val('');
clon.find(".date").datetimepicker();
clon.find('select').selectpicker();
});
// Evento que selecciona la fila y la elimina
$(document).on("click",".eliminar",function(){
var parent = $(this).parents().get(0);
$(parent).remove();
});
});
</script>