Bootstrap-select: "Select" only works with first row of table when adding bootstrap-select classes

[eoarria]

Hi,

Sorry to take some of your valuable time. Just added bootstrap-select classes to a "select" statement inside a php function (used to get a couple of dropdown lists in each table row) and now the dropdown list does not work anymore except for the first row, which is no generated by the javascript function but directly on the HTLM code of the page. If I remove the select classes, everything goes back to normal and I see the dropdown lists in every row. I have two buttons, an ADD one and a DELETE one, both were working perfectly before the class change, and they still do after it, but the additional dropdown lists are missing.

Here's the function code: `

function creaLista($varnom, $consnum, $valgrab, $valmos, $consul, $m2)
{
    global $arrayVariables;

    $arrayVariables[] = $varnom;
    $query=mysqli_query($m2, $consul[$consnum]);

    echo "<select class='selectpicker' data-style='btn-info' data-live-search='true' name=$varnom value=''>";       
    while($rows=mysqli_fetch_array($query)) 
    { 
        echo    "<option value=$rows[$valgrab]>$rows[$valmos]</option>";
    } 
    echo "</select>";
}

`
If you remove the "class='selectpicker' data-style='btn-info' data-live-search='true' " inside the "select" statement, it all works well.

Now, The first call to this function in my HTML code works perfectly. But when I try to add new rows, the dropdown lists simply disappear. Here's the javascript code used to add and delete rows:

$(function(){
    $('#add').click(function(){
        addnewrow();
    });
    $("#tbUser").on('click', '.btnDelete', function () {
        $(this).closest('tr').remove();
    });


    });

    function addnewrow()
    {
        var n = ($('.detail tr').length-0)+1;
        var tr = '<tr>' +
                        '<td class="no">' + n + '</td>'+
                        "<td><?php creaLista('mrditemid[]',3,'SPARES_ID','SPARES_BRIEFDESC',$query2, $m);?></td>"+
                        "<td><?php creaLista('mrdunits[]',4,'UNIT_ID','UNIT_DESC',$query2, $m);?></td>"+
                        '<td><input type="text" class="form-control mrdquantity" name="mrdquantity[]"></td>'+
                        '<td><input type="text" class="form-control mrdremarks" name="mrdremarks[]"></td>'+
                        '<td><button class="btnDelete btn btn-danger">-</td>'+
                 '</tr>';

    $('.detail').append(tr);

    }

With the class change in SELECT, the dropdown lists just dissapeared. I also tried removing each class separatedly....class='selectpicker' data-style='btn-info' data-live-search='true', but only when I remove the main class, "selectpicker", I get back all the dropdowns...

Thanks for your support, and again, sorry for taking your valuable time...

[amitsquare]

Still unclear about your problem .
But if you are adding select dynamically .Then you need to force render for the library .

$('.selectpicker').selectpicker('render')

Documentation force render

[eoarria]

Amitsqaure, just did it and the issue was gone... thanks for your support...!