title: Add Remove Select Box Fields Dynamically using jQuery Ajax in PHP
body: <p>After adding multiple select box fields and submit those select box value into PHP script by using Ajax and inserted into Mysql table
  How to add or remove dynamic Select Box data dynamically using Jquery and insert into Mysql table using Ajax with PHP with Validation</p>
  
  <p>Select box must be dynamic for eg Categories and Product . According to Categories all Products shown in product dropdown. </p>
  
  <p>After that I can Add more Dropdowns or we can say new div(duplicate of div) of 3 fields i.e 2 dropdowns and one input box and also option to remove div with validations</p>
  
  <p>This is my code : index.php</p>
  
  <pre><code>&lt;script type="text/javascript" src="js/jquery.min.js"&gt;&lt;/script&gt;
  &lt;?php include("db.php");?&gt;
  &lt;div class="data"&gt;
      Category :
      &lt;select name="category1" id="category1"&gt;
          &lt;option value=''&gt;------- Select --------&lt;/option&gt;
          &lt;?php
              $sql = "select * from `categories`";
              $res = mysqli_query($con, $sql);
              if(mysqli_num_rows($res) &gt; 0) {
                  while($row = mysqli_fetch_object($res)) {
                      echo "&lt;option value='".$row-&gt;cat_id."'&gt;".$row-&gt;cat_name."&lt;/option&gt;";
                  }
              }
          ?&gt;
      &lt;/select&gt;
  
      Products :
      &lt;select name="products1" id="products1"&gt;
          &lt;option&gt;------- Select --------&lt;/option&gt;
      &lt;/select&gt;
      &lt;input type ="text" name="price1" value="" placeholder="Price"&gt;
  &lt;/div&gt;
  &lt;a href="#"&gt;Add More&lt;/a&gt;
  &lt;a href="#"&gt;Remove&lt;/a&gt;
  
  
  &lt;script&gt;
  $(document).ready(function() {
      $("#category1").change(function() {
          var product_id = $(this).val();
          if(product_id != "") {
              $.ajax({
                  url:"get-products.php",
                  data:{product_id:product_id},
                  type:'POST',
                  success:function(response) {
                      var resp = $.trim(response);
                      $("#products1").html(resp);
                  }
              });
          } else {
              $("#products1").html("&lt;option value=''&gt;------- Select --------&lt;/option&gt;");
          }
      });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>get-products.php</p>
  
  <pre><code>include("db.php"); 
  if(isset($_POST['product_id'])) {
      $sql = "select * from `products` where `cat_id`=".mysqli_real_escape_string($con, $_POST['product_id']);
      $res = mysqli_query($con, $sql);
      if(mysqli_num_rows($res) &gt; 0) {
          echo "&lt;option value=''&gt;------- Select --------&lt;/option&gt;";
          while($row = mysqli_fetch_object($res)) {
              echo "&lt;option value='".$row-&gt;product_id."'&gt;".$row-&gt;product_name."&lt;/option&gt;";
         }
      }
  }else {
      header('location: ./');
  }
  </code></pre>