title: Searchable Dropdown value in Dynamically added rows
body: <p>Im using php and simple js to add searchable dropdown list in Dynamically added rows, My problem is that, When i add the first rows, the searchable dropdown works fine, but when i add another row, dropdown does not work... Can anyone help me solving this
   <a href="https://i.stack.imgur.com/YHBQs.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YHBQs.jpg" alt="enter image description here"></a></p>
  
  <pre><code>$(document).ready(function(){
        $(document).on('click','.btn_addOrder', function(){
          var html='';
          html+='&lt;tr&gt;';
          html+='&lt;td&gt;&lt;input type="text" class="form-control productname" style="display:none" name="productname[]" readonly&gt;&lt;/td&gt;';
          html+='&lt;td&gt;&lt;input type="text" class="form-control totalcp" style="display:none" name="totalcp[]" readonly&gt;&lt;/td&gt;';
          html+='&lt;td&gt;&lt;input type="text" class="form-control unitcode" style="display:none" name="unitcode[]" readonly&gt;&lt;/td&gt;';
          html+='&lt;td&gt;&lt;input type="hidden" class="form-control productcode" name="productcode[]" readonly&gt;&lt;/td&gt;';
          html+='&lt;td&gt;&lt;select class="form-control productid" name="productid[]" id="productid"  required&gt;&lt;option value="0"&gt;--Select Product--&lt;/option&gt;&lt;/select&gt;&lt;/td&gt;';        
          html+='&lt;td&gt;&lt;input type="text" class="form-control productstock" name="productstock[]" readonly&gt;&lt;/td&gt;';
          html+='&lt;td&gt;&lt;input type="number"  class="form-control quantity_product" name="quantity[]" required&gt;&lt;/td&gt;';
          html+='&lt;td&gt;&lt;input type="text" class="form-control productsatuan"  name="productsatuan[]" readonly&gt;&lt;/td&gt;';
          html+='&lt;td&gt;&lt;button type="button" name="remove" class="btn btn-danger btn-sm btn-remove"&gt;&lt;i class="fa fa-remove"&gt;&lt;/i&gt;&lt;/button&gt;&lt;/td&gt;';
  
          $('#myStock').append(html);
          $("#productid").select2({
          ajax:{
            url:"prod.php",
            type:"post",
            dataType:"json",
            delay:250,
            data:function(params){     return{   searchTerm:params.term        };      },
            processResults:function(response){   return{       results:response          };    },
            cache:true
            }
          });
  
          $('.productid').on('change', function(e){
            var productid = this.value;
            var tr=$(this).parent().parent();
            $.ajax({
              url:"getproduct.php",
              method:"post",
              data:{id:productid},
              success:function(data){
                //console.log(data);
                tr.find(".productcode").val(data["product_code"]);
                tr.find(".productname").val(data["product_name"]);
                tr.find(".productstock").val(data["stock"]);
                tr.find(".productsatuan").val(data["nm_satuan"]);
                tr.find(".unitcode").val(data["kd_satuan"]);
                tr.find(".totalcp").val(data["total_cp"]);
                tr.find(".quantity_product").val(0);
               }
            })
          })
        })
        //Remove Row
        $(document).on('click','.btn-remove', function(){
          $(this).closest('tr').remove(); 
        });
  </code></pre>