Dynamically add a table row with a bootstrap selectpicker

Question

I'm trying to dynamically add a table row. one of the td's has a bootstrap select picker field. when I add the class select picker in JavaScript the field does not render the field, when i remove the class the select field renders without the search input. i would like the select to be rendered as a bootstrap select picker rather than a plain select field

 function addRow() { $("#addRowBtn").button("loading"); var tableLength = $("#productTable tbody tr").length; var tableRow; var arrayNumber; var count; if (tableLength > 0) { tableRow = $("#productTable tbody tr:last").attr("id"); arrayNumber = $("#productTable tbody tr:last").attr("class"); count = tableRow.substring(3); count = Number(count) + 1; arrayNumber = Number(arrayNumber) + 1; } else { // no table row count = 1; arrayNumber = 0; } $.ajax({ url: "php_action/fetchProductData.php", type: "post", dataType: "json", success: function (response) { $("#addRowBtn").button("reset"); var tr = '<tr id="row' + count + '" class="' + arrayNumber + '">' + "<td>" + '<div class="form-group">' + '<div class="search_select">' + '<select class="form-control" data-live-search="true" name="productName[]" id="productName' + count + '" onchange="getProductData(' + count + ')" >' + '<option value="">~~SELECT~~</option>'; // console.log(response); $.each(response, function (index, value) { tr += '<option value="' + value[0] + '">' + value[1] + "</option>"; }); tr += "</select>" + "</div>" + "</div>" + "</td>" + '<td style="padding-left:20px;"">' + '<input type="text" name="rate[]" id="rate' + count + '" autocomplete="off" disabled="true" class="form-control" />' + '<input type="hidden" name="rateValue[]" id="rateValue' + count + '" autocomplete="off" class="form-control" />' + '</td style="padding-left:20px;">' + '<td style="padding-left:20px;">' + '<div class="form-group">' + '<input type="number" name="quantity[]" id="quantity' + count + '" onkeyup="getTotal(' + count + ')" autocomplete="off" class="form-control" min="1" />' + "</div>" + "</td>" + '<td style="padding-left:20px;">' + '<input type="text" name="total[]" id="total' + count + '" autocomplete="off" class="form-control" disabled="true" />' + '<input type="hidden" name="totalValue[]" id="totalValue' + count + '" autocomplete="off" class="form-control" />' + "</td>" + "<td>" + '<button class="btn btn-default removeProductRowBtn" type="button" onclick="removeProductRow(' + count + ')"><i class="glyphicon glyphicon-trash"></i></button>' + "</td>" + "</tr>"; if (tableLength > 0) { $("#productTable tbody tr:last").after(tr); } else { $("#productTable tbody").append(tr); $(".search_select").selectpicker("refresh"); } }, // /success }); // get the product data } // /add row

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table class="table" id="productTable"> <thead> <tr> <th style="width:40%;">Product</th> <th style="width:20%;">Rate</th> <th style="width:15%;">Quantity</th> <th style="width:15%;">Total</th> <th style="width:10%;"></th> </tr> </thead> <tbody> <?php $arrayNumber = 0; for ($x = 1; $x < 4; $x++) { ?> <tr id="row<?php echo $x; ?>" class="<?php echo $arrayNumber; ?>"> <td style="margin-left:20px;"> <div class="form-group"> <select class="form-control selectpicker" data-live-search="true" name="productName[]" id="productName<?php echo $x; ?>" onchange="getProductData(<?php echo $x; ?>)"> <option value="">~~SELECT~~</option> <?php $productSql = "SELECT * FROM product WHERE active = 1 AND status = 1 AND quantity != 0"; $productData = $connect->query($productSql); while ($row = $productData->fetch_array()) { echo "<option value='" . $row['product_id'] . "' id='changeProduct" . $row['product_id'] . "'>" . $row['product_name'] . "</option>"; } // /while ?> </select> </div> </td> <td style="padding-left:20px;"> <input type="text" name="rate[]" id="rate<?php echo $x; ?>" autocomplete="off" disabled="true" class="form-control" /> <input type="hidden" name="rateValue[]" id="rateValue<?php echo $x; ?>" autocomplete="off" class="form-control" /> </td> <td style="padding-left:20px;"> <div class="form-group"> <input type="number" name="quantity[]" id="quantity<?php echo $x; ?>" onkeyup="getTotal(<?php echo $x ?>)" autocomplete="off" class="form-control" min="1" /> </div> </td> <td style="padding-left:20px;"> <input type="text" name="total[]" id="total<?php echo $x; ?>" autocomplete="off" class="form-control" disabled="true" /> <input type="hidden" name="totalValue[]" id="totalValue<?php echo $x; ?>" autocomplete="off" class="form-control" /> </td> <td> <button class="btn btn-default removeProductRowBtn" type="button" id="removeProductRowBtn" onclick="removeProductRow(<?php echo $x; ?>)"><i class="glyphicon glyphicon-trash"></i></button> </td> </tr> <?php $arrayNumber++; } // /for ?> </tbody> </table>

Answer 1

i had to change the class of the field being rendered in javascript and render the element using the knew class name

 function addRow() { $("#addRowBtn").button("loading"); var tableLength = $("#productTable tbody tr").length; var tableRow; var arrayNumber; var count; if (tableLength > 0) { tableRow = $("#productTable tbody tr:last").attr("id"); arrayNumber = $("#productTable tbody tr:last").attr("class"); count = tableRow.substring(3); count = Number(count) + 1; arrayNumber = Number(arrayNumber) + 1; } else { // no table row count = 1; arrayNumber = 0; } $.ajax({ url: "php_action/fetchProductData.php", type: "post", dataType: "json", success: function (response) { $("#addRowBtn").button("reset"); var tr = '<tr id="row' + count + '" class="' + arrayNumber + '">' + "<td>" + '<div class="form-group">' + '<div class="search_select">' + '<select class="form-control sele" data-live-search="true" name="productName[]" id="productName' + count + '" onchange="getProductData(' + count + ')" >' + '<option value="">~~SELECT~~</option>'; // console.log(response); $.each(response, function (index, value) { tr += '<option value="' + value[0] + '">' + value[1] + "</option>"; }); tr += "</select>" + "</div>" + "</div>" + "</td>" + '<td style="padding-left:20px;"">' + '<input type="text" name="rate[]" id="rate' + count + '" autocomplete="off" disabled="true" class="form-control" />' + '<input type="hidden" name="rateValue[]" id="rateValue' + count + '" autocomplete="off" class="form-control" />' + '</td style="padding-left:20px;">' + '<td style="padding-left:20px;">' + '<div class="form-group">' + '<input type="number" name="quantity[]" id="quantity' + count + '" onkeyup="getTotal(' + count + ')" autocomplete="off" class="form-control" min="1" />' + "</div>" + "</td>" + '<td style="padding-left:20px;">' + '<input type="text" name="total[]" id="total' + count + '" autocomplete="off" class="form-control" disabled="true" />' + '<input type="hidden" name="totalValue[]" id="totalValue' + count + '" autocomplete="off" class="form-control" />' + "</td>" + "<td>" + '<button class="btn btn-default removeProductRowBtn" type="button" onclick="removeProductRow(' + count + ')"><i class="glyphicon glyphicon-trash"></i></button>' + "</td>" + "</tr>"; if (tableLength > 0) { $("#productTable tbody tr:last").after(tr); $(".sele").selectpicker("render"); } else { $("#productTable tbody").append(tr); $(".sele").selectpicker("render"); } }, // /success }); // get the product data } // /add row