title: Creating Add more Button JavaScript with Bootstrap Select
body: <p>I'm developing billing software in core php</p>
  
  <p>i need searchable select tag with add more button</p>
  
  <p>i had created add select using bootstrap</p>
  
  <pre><code>&lt;html&gt;
  
  &lt;head&gt;
    &lt;link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"&gt;
    &lt;link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.min.css" /&gt;
  &lt;/head&gt;
  
  &lt;div class="container"&gt;
    &lt;div class="row"&gt;
      &lt;h2&gt;Bootstrap-select example&lt;/h2&gt;
      &lt;p&gt;This uses &lt;a href="https://silviomoreto.github.io/bootstrap-select/"&gt;https://silviomoreto.github.io/bootstrap-select/&lt;/a&gt;
      &lt;/p&gt;
      &lt;hr /&gt;
    &lt;/div&gt;
  
    &lt;div class="row-fluid"&gt;
      &lt;tbody&gt;
        &lt;tr&gt;
          &lt;td&gt;
            &lt;h4&gt;1&lt;/h4&gt;
          &lt;/td&gt;
          &lt;td class="text-semibold text-dark"&gt;
            &lt;select class="selectpicker" data-show-subtext="true" data-live-search="true" onchange="getModel(this.value);" name="products"&gt;
              &lt;option value="" disabled selected&gt;Choose Products&lt;/option&gt;
              &lt;?php include "inc/db-connect.php"; $qryyy=m ysqli_query($conn, "SELECT * FROM `products`"); if (mysqli_num_rows($qryyy)&gt; 0) { // output data of each row while($rowpro = mysqli_fetch_assoc($qryyy)) { ?&gt;
              &lt;option data-subtext="(INR &lt;?php echo $rowpro['price']; ?&gt;/-)" value="&lt;?php echo $rowpro['id']; ?&gt;"&gt;
                &lt;?php echo $rowpro[ 'pname']; ?&gt;
              &lt;/option&gt;
              &lt;?php }} else { ?&gt;
              &lt;option value="" data-subtext=" first!!!"&gt;
                &lt;?php echo "Please add products"; ?&gt;
              &lt;/option&gt;
              &lt;?php } ?&gt;
            &lt;/select&gt;
          &lt;/td&gt;
          &lt;td&gt;
            &lt;label id="model-list" style="padding-left: 100px;"&gt;&lt;/label&gt;
          &lt;/td&gt;
          &lt;td&gt;
            &lt;input type="number" name="qty" id="qty" min="1" style="width:70px;"&gt;
          &lt;/td&gt;
          &lt;td&gt;
            &lt;input type="number" name="price" id="price" min="1" style="width:70px;" readonly&gt;
          &lt;/td&gt;
          &lt;td&gt;
            &lt;button type="button" name="add" id="add" class="btn btn-success"&gt;Add More&lt;/button&gt;
          &lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.min.js"&gt;&lt;/script&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>Above code is working fine but when i had inserted add more javascript
  then css is missing from next result of add more script</p>
  
  <pre><code>&lt;script&gt;
    $(document).ready(function() {
          var i = 1;
          $('#add').click(function() {
            i++;
            $('#dynamic_field').append('&lt;tr id="row' + i + '"&gt;&lt;td&gt;&lt;h4&gt;' + i + '&lt;/h4&gt;&lt;/td&gt;&lt;td class="text-semibold text-dark"&gt;&lt;select class="selectpicker" data-show-subtext="true" data-live-search="true" onchange="getModel(this.value);" name="products"&gt;&lt;option value="" disabled selected&gt;Choose Products&lt;/option&gt;&lt;?php 
              include "inc/db-connect.php"; $qryyy = mysqli_query($conn, "SELECT * FROM `products`");
              if (mysqli_num_rows($qryyy) &gt; 0) {
                // output data of each row
                while ($rowpro = mysqli_fetch_assoc($qryyy)) { ?&gt;
                  &lt; option data - subtext = "(INR &lt;?php echo $rowpro['price']; ?&gt;/-)"
                  value = "&lt;?php echo $rowpro['id']; ?&gt;" &gt; &lt;? php echo $rowpro['pname']; ?&gt; &lt; /option&gt;&lt;?php 
                }
              } else { ?&gt;
                &lt; option value = ""
                data - subtext = " first!!!" &gt; &lt;? php echo "Please add products"; ?&gt; &lt; /option&gt;&lt;?php } ?&gt; &lt; /select &gt; &lt; /td &gt; &lt; td &gt; &lt; label id = "model-list"
                style = "padding-left: 100px;" &gt; &lt; /label&gt;&lt;/td &gt; &lt; td &gt; &lt; input type = "number"
                name = "qty"
                id = "qty"
                min = "1"
                style = "width:70px;" &gt; &lt; /td&gt;&lt;td&gt;&lt;input type="number" name="price" id="price" min="1" style="width:70px;" readonly&gt;&lt;/td &gt; &lt; td &gt; &lt; button type = "button"
                name = "remove"
                id = "'+i+'"
                class = "btn btn-danger btn_remove" &gt; X &lt; /button&gt;&lt;/td &gt; &lt; /tr&gt;');
              });
  
            $(document).on('click', '.btn_remove', function() {
              var button_id = $(this).attr("id");
              $('#row' + button_id + '').remove();
            });
  
            $('#submit').click(function() {
              $.ajax({
                url: "name.php",
                method: "POST",
                data: $('#add_name').serialize(),
                success: function(data) {
                  alert(data);
                  $('#add_name')[0].reset();
                }
              });
            });
  
          });
  &lt;/script&gt;
  </code></pre>
  
  <p>I know my english is too bad, but i need help if any one can understand with my language then please help me out from this...
  Or just suggest other way to go through it...
  ..............................................................................                                          </p>
  
  <p><strong>EDIT : Codepen Demo : <a href="https://codepen.io/singhviku/pen/JzyBVZ" rel="nofollow noreferrer">https://codepen.io/singhviku/pen/JzyBVZ</a></strong></p>