$(document).ready(function(){
  // Add new element
  $(".add").click(function(){
 
   console.log("Click");
 
   // Finding total number of elements added
   var total_element = $(".element").length;
 
   // last <div> with element class id
   var lastid = $(".element:last").attr("id");
   var split_id = lastid.split("_");
   var nextindex = Number(split_id[1]) + 1;
   var max = 20;
   var idv = nextindex; 
   var int = nextindex-1;
 
   // Check total number elements
   if(total_element < max ){
       
      // Adding new div container after last occurance of element class
      $(".element:last").after("<div class='element border p-2' id='div_"+ nextindex +"'></div>");
 
      // Adding element to <div>
      $("#div_" + nextindex).append("<div class='form-row'><label for='staticEmail' class='col-sm-2 col-form-label' style='text-align: right;'><h4>รายการที่ "+ int +" </h4></label></div>");
      $("#div_" + nextindex).append("<button style='margin-left: 80%;' title='ลบ' id='remove_" + nextindex + "' class='remove mb-xs mt-xs mr-xs btn btn-danger'>X ลบ</button>");
      $("#div_" + nextindex).append("<div class='form-row'>");
      $("#div_" + nextindex).append("<div class='form-row'>");
      $("#div_" + nextindex).append("<div class='form-group row'><label for='staticEmail' class='col-sm-2 col-form-label' style='text-align: right;'>สินค้า </label><div class='col-sm-10'><div class='form-row'><div class='col-sm-8'><select data-plugin-selectTwo id='product"+ nextindex +"' name='product[]' class='js-data-example-ajax"+ nextindex +" form-control populate mr-2' onchange='serchingcolor(this.value,"+ nextindex +");'></select></div></div></div></div>");
      $("#div_" + nextindex).append("<div class='form-group row'><label for='staticEmail' class='col-sm-2 col-form-label' style='text-align: right;'>สีสินค้า </label><div class='col-sm-10'><div class='form-row'><div class='col-sm-8'><select id='color"+ nextindex +"' name='color[]' class='form-control mr-2' onchange='seachingStock(value,"+ nextindex +")'></select></div></div></div></div>");
      $("#div_" + nextindex).append("<div class='form-group row'><label for='staticEmail' class='col-sm-2 col-form-label' style='text-align: right;'>จำนวนสินค้า </label><div class='col-sm-10'><div class='form-row'><div class='col-sm-8'><input type='number' min='1' class='form-control mr-2' id='number"+ nextindex +"' name='number[]' value='1'></div><div class='col-sm-4'></div></div></div></div>");
      $("#div_" + nextindex).append("<br><hr>");
 
      $.ajax({
         type: 'POST',
         url: 'sql/sql_product.php',
         dataType: 'json',
         data : {idv:idv},
         success: function (result) {
           $.each(result, function (key, value) {
             $("#product"+ nextindex).append("<option value="+value.id+">"+value.name+"</option>");
           });
         }
       });    
      $(".js-data-example-ajax"+ nextindex +"").select2();
   }
 
  });
  // Remove element
  $('.container').on('click','.remove',function(){
   var id = this.id;
   var split_id = id.split("_");
   var deletenextindex = split_id[1];
   // Remove <div> with id
   $("#div_" + deletenextindex).remove();
  });
 });
 
 
 function serchingcolor(val,inx){      
       removeAllOptions(inx);
       $("#textwr"+inx).text("");
       $.ajax({
         type: 'POST',
         url: 'sql/sql_productcolor_d.php',
         dataType: 'json',
         data : {id:val},
         success: function (result) {
           $.each(result, function (key, value) {
             $("#color"+inx).append("<option value="+value.id+">"+value.color+"</option>");
           });
         }
       });  
 }
 
 function serchingcolor(val,inx){      
    removeAllOptions(inx);
    $.ajax({
      type: 'POST',
      url: 'sql/sql_productcolor.php',
      dataType: 'json',
      data : {id:val},
      success: function (result) {
        $.each(result, function (key, value) {
          $("#color"+inx).append("<option value="+value.id+">"+value.color+"</option>");
        });
      }
    });  
}
 
 function removeAllOptions(inx){
     var select = document.getElementById('color'+inx);
     select.options.length = 0;
 }