title: Adding Unlimited Form Fields With JQuery and Saving to a Database with multiple rows
body: <p>
  
  <pre><code>$rs1=mysql_query("SELECT * FROM companydetails ORDER BY companyname");    
  $customerlist="&lt;option value=''&gt;&lt;/option&gt;";
  while($row=mysql_fetch_array($rs1))
  {        
      $customerlist.="&lt;OPTION VALUE=".$row["comid"]." &gt;";
      $customerlist.=$row["companyname"]."&lt;/OPTION&gt;";        
  }
  
  $query_parent = mysql_query("SELECT * FROM `material` order by `marterial_name`") or die("Query failed: ".mysql_error());
  $material='&lt;option value=""&gt;&lt;/option&gt;';
  while($row = mysql_fetch_array($query_parent))
  {   
      $material.="&lt;option value=" .$row["id"]."&gt;";
      $material.=$row["marterial_name"]."&lt;/option&gt;";
  }                                                                                                                                      
  $query_parent1 = mysql_query("SELECT * FROM `material_location` order by `location`") or die("Query failed: ".mysql_error());
  
  $exclusivetax=mysql_query("SELECT * FROM exclusive_tax ORDER BY id");    
  $tax='&lt;option value=""&gt;&lt;/option&gt;';
  while($row=mysql_fetch_array($exclusivetax))
  {                
      $tax.="&lt;OPTION VALUE=".$row["id"]." &gt;";
      $tax.=$row["tax"]."&lt;/OPTION&gt;";
  }
  
  $rs1=mysql_query("SELECT * FROM quotation_type ORDER BY type");    
  $purchase_type='&lt;option value=""&gt;&lt;/option&gt;';
  while($row=mysql_fetch_array($rs1))
  {                
      $purchase_type.="&lt;OPTION VALUE=".$row["id"]." &gt;";
      $purchase_type.=$row["type"]."&lt;/OPTION&gt;";
  }    
  
  $rs1=mysql_query("SELECT * FROM cz where (role='purchase' or role='sales' or role='Repair' or role='admin' or role='CSM' or role='Teamleader' or role='Superuser') and status='Active' order by username");
  $u="&lt;OPTION VALUE=''&gt;&lt;/OPTION&gt;";
  while($row=mysql_fetch_array($rs1))
  {
      $u.="&lt;OPTION VALUE=".$row["email2"]." &gt;";
      $u.=$row["email2"]."&lt;/OPTION&gt;";
      //$email2=$row["email2"];
  }    
  
  ?&gt;
  &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=Cp1252"&gt;
  &lt;script language="javascript" src="../calendar/calendar.js"&gt;&lt;/script&gt;
  &lt;link href="../calendar/calendar.css" rel="stylesheet" type="text/css"&gt;
  &lt;script type="text/javascript"&gt;
          SyntaxHighlighter.all();
  &lt;/script&gt;
  &lt;script type="text/javascript" src="../js/custombox.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="../js/jquery.searchabledropdown-1.0.8.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
   var $old = $.noConflict();
  &lt;/script&gt;
  &lt;link rel="stylesheet" href="../css/custombox.css"&gt;
  &lt;script type="text/javascript"&gt;
  
  $(document).ready(function() {
  
      $("#parent_cat").change(function() {
          $me=$(this).val();
          $.get('loadsubcat.php?parent_cat=' + $(this).val(), function(data) {
              $("#sub_cat").html(data);    
          });    
      });
  });
  &lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  $(document).ready(function() {
  
      $.get('pdetail.php', function(data) {
          $("#users").html(data);    
          });
  
      $("#category").change(function() {
          $me=$(this).val();
          $.get('pdetail.php?category=' + $me, function(data) {
              $("#users").html(data);    
              });
  
          });        
  });
  &lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
  $(document).ready(function() {
  
      $("#parent_cat").change(function() {
          $me=$(this).val();
  
      });
          $("#sub_cat").change(function() {
              $me1=$(this).val();
  
              $.get('material_type.php?parent_cat=' + $me + '&amp; sub_cat=' + $me1 , function(data) {
                  $("#sub_cat11").html(data);
          });    
      });
  
  });
  &lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  
  $(document).ready(function() {
  
      $("#parent_cat").change(function() {
          $me=$(this).val();
          });
      $("#sub_cat").change(function() {
          $me1=$(this).val();
          });       
  
          });    
      });    
      $(function () {
          $('#stock').on('click', function ( e ) {
              Custombox.open({
                  target: 'view_stock_full_detail.php?id=1&amp; material=' + $me + '&amp; maker='+ $me1 +'&amp; type=' + $me2,
                  effect: 'fadein',
                  escKey: true,
                  overlaySpeed: 100,
                  overlayClose: true,
                  speed: 100
              });
              e.preventDefault();
          });
      });        
  });
  
  &lt;/script&gt; 
  &lt;script type="text/javascript"&gt;
      $(document).ready(function ($) 
      {
          //initilize any plugins that need the newer version of jquery
          var counter = 2;
  
             $("#addButton").click(function () 
             {                
              if(counter&gt;10)
              {
                  alert("You can add only 10 Material Details");
                  return false;
              }   
              var newTextBoxDiv = $(document.createElement('div'))
               .attr("id", 'TextBoxDiv' + counter)
               .attr("style",'margin-top:10px;margin-left:2px;');
              newTextBoxDiv.after().html( '&lt;table border="1px" BORDERCOLOR="#98AFC7"&gt;'+
                                              '&lt;tr&gt;'+
                                                  '&lt;td width="100px"&gt;'+
                                                       '&lt;div  style="width:150;height:20px; float:left; text-align:center"&gt;'+
                                                           '&lt;font size="+1"&gt;Material:&lt;/font&gt;'+
                                                       '&lt;/div&gt;'+
                                                   '&lt;/td&gt;'+
                                                   '&lt;td width="200px"&gt;'+
                                                        '&lt;div style="float:left;margin-left:20px;"&gt;'+
                                                             '&lt;select class="nav" name="parent_cat1[]" id="parent_cat' + counter + '"&gt; &lt;?php echo $material; ?&gt; &lt;/select&gt;'+
                                                         '&lt;/div&gt;'+
                                                   '&lt;/td&gt;'+
                                                   '&lt;td width="100"&gt;'+
                                                        '&lt;div  style="width:100;height:20px; text-align:center"&gt;'+
                                                             '&lt;font size="+1"&gt;Make:&lt;/font&gt;'+
                                                        '&lt;/div&gt;'+
                                                   '&lt;/td&gt;'+
                                                   '&lt;td&gt;'+
                                                        '&lt;div style="float:left;margin-left:20px;"&gt;'+
                                                            '&lt;select class="nav" name="sub_cat1[]" id="sub_cat'+ counter +'"&gt;&lt;/select&gt;'+
                                                        '&lt;/div&gt;'+
                                                   '&lt;/td&gt;'+
                                              '&lt;/tr&gt;'+
                                          '&lt;/table&gt;'+
                                          '&lt;table border="1px" BORDERCOLOR="#98AFC7"&gt;'+
                                               '&lt;tr&gt;'+
                                                   '&lt;td width="100"&gt;'+
                                                       '&lt;div style="width:150;height:20px; float:left; text-align:center"&gt;'+
                                                            '&lt;font size="+1"&gt;Type:&lt;/font&gt;'+
                                                       '&lt;/div&gt;'+
                                                   '&lt;/td&gt;'+
                                                   '&lt;td&gt;'+ 
                                                       '&lt;div style="float:left;margin-left:20px;"&gt;'+
                                                            '&lt;select class="nav" name="sub_cat111[]" id="sub_cat11'+ counter +'"&gt;&lt;/select&gt;'+
                                                       '&lt;/div&gt;'+
                                                   '&lt;/td&gt;'+
                                                   '&lt;td&gt;'+
                                                       '&lt;div style="width:100px;height:20px;text-align:center"&gt;'+
                                                           '&lt;font size="+1"&gt;Quantity:&lt;/font&gt;'+
                                                       '&lt;/div&gt;'+
                                                   '&lt;/td&gt;'+
                                                   '&lt;td&gt;'+
                                                       '&lt;div  style="margin-left:20px;"&gt;'+
                                                           '&lt;input type="text" name="quantity1[]" id="quantity"&gt;'+
                                                       '&lt;/div&gt;'+
                                                   '&lt;/td&gt;'+
                                                   '&lt;td&gt;'+
                                                       '&lt;div  id="stock' + counter +'" name="stock" style="width:150px;height:20px;text-align:center; margin-left:20px;"&gt;&lt;/div&gt;'+
                                                   '&lt;/td&gt;'+
                                               '&lt;/tr&gt;'+
                                               '&lt;tr&gt;'+
  
  
                                                   '&lt;td&gt;'+
                                                       '&lt;div style="width:100px;height:20px;text-align:center"&gt;'+
                                                           '&lt;font size="+1"&gt;Sales Detail:&lt;/font&gt;'+
                                                       '&lt;/div&gt;'+
                                                   '&lt;/td&gt;'+
                                                   '&lt;td&gt;'+
                                                       '&lt;div  style="margin-left:20px;"&gt;'+
                                                           '&lt;textarea rows="2" cols="25" name="s_price1[]" id="s_price" &gt;&lt;/textarea&gt;'+
                                                       '&lt;/div&gt;'+
                                                   '&lt;/td&gt;'+
                                                   '&lt;td&gt;'+
                                                      '&lt;div style="margin-left:20px;width:100px;"&gt;'+
                                                          '&lt;input type="checkbox" name="s_including1[]" id="including" value="including"&gt;&lt;font size="+0"&gt;Including&lt;/font&gt;'+
                                                          '&lt;input type="checkbox" name="s_including1[]" id="excluding" value="excluding"&gt;&lt;font size="+0"&gt;Excluding&lt;/font&gt;'+
                                                          '&lt;select class="nav" name="s_excluding_tax1[]" id="p_excluding_tax' + counter + '"&gt; &lt;?php echo $tax; ?&gt; &lt;/select&gt;'+
                                                      '&lt;/div&gt;'+
  
                                                      '&lt;td&gt;'+
                                                       '&lt;div style="width:100px;height:20px;text-align:center"&gt;'+
                                                           '&lt;font size="+1"&gt;Price:&lt;/font&gt;'+
                                                       '&lt;/div&gt;'+
                                                   '&lt;/td&gt;'+
                                                   '&lt;td&gt;'+
                                                       '&lt;div  style="margin-left:20px;"&gt;'+
                                                           '&lt;input type="text" name="price1[]" id="price"&gt;'+
                                                       '&lt;/div&gt;'+
                                                   '&lt;/td&gt;'+
  
                                                  '&lt;/td&gt;'+
                                               '&lt;/tr&gt;'+
                                           '&lt;/table&gt;');
              newTextBoxDiv.appendTo("#TextBoxesGroup");
              var i=counter;
  
              $("#parent_cat" + counter ).change(function() {
                  $me=$(this).val();
  
                  $.get('loadsubcat.php?parent_cat=' + $me, function(data) {
  
                      $("#sub_cat" + i  ).html(data);
                  });    
              });
              $("#parent_cat" + counter ).change(function() {
                  $me=$(this).val();
  
              });
                  $("#sub_cat" + i ).change(function() {
                      $me1=$(this).val();
  
                      $.get('material_type.php?parent_cat=' + $me + '&amp; sub_cat=' + $me1 , function(data) {
                          $("#sub_cat11" + i ).html(data);
                  });    
              });
              $("#sub_cat" + i).change(function() {
                      $me1=$(this).val();
              });
                  $("#sub_cat11" + i).change(function() {
                      $me2=$(this).val();
                      $.get('stock_value5.php?parent_cat=' + $me + '&amp; sub_cat=' + $me1 + '&amp; sub_cat11=' + $(this).val() , function(data) {
                          $("#stock" + i).html(data);
  
                      });    
                  });                    
              counter++;                
           });
  
           $("#removeButton").click(function () 
           {
              if(counter==2)
              {
                  alert("No more Material Details to remove");
                  return false;
                 }   
              counter--;
              $("#TextBoxDiv" + counter).remove();
           });
           $("#save").click(function () 
           {
              var msg = '';
              for(i=1; i&lt;counter; i++)
              {
                       msg += $('#person' + i).val();
              }  
           });
  
      });
  
      $old(document).ready(function ($) {
          //initilize any plugins that need the older version of jquery
          $("#select").searchable();
      });
  &lt;/script&gt;
  &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;script&gt;
  function openWin()
  {
      var myWindow = window.open("new_material.php","","width=300,height=200");
  }
  function openWin1()
  {
      var myWindow = window.open("new_make.php","","width=300,height=200");
  }
  
  function openWin4()
  {
      var myWindow = window.open("new_material_type.php","","width=300,height=200");
  }
  function stopRKey(evt) { 
        var evt = (evt) ? evt : ((event) ? event : null); 
        var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null); 
        if ((evt.keyCode == 13) &amp;&amp; (node.type=="text"))  {return false;} 
      } 
  
      document.onkeypress = stopRKey; 
  &lt;/script&gt;
  
  &lt;title&gt;Solution Infinite&lt;/title&gt;
  &lt;style type="text/css"&gt;
  font
  {
      color:#FFFFFF
  }
  &lt;/style&gt;
  
  &lt;/head&gt;
  
      &lt;body&gt;
      &lt;form action="pdsave.php" method="post" name="quatation" id="quatation" &gt;
      &lt;input type="hidden" name="form_secret" value="&lt;?php echo $_SESSION['FORM_SECRET'] ?&gt;" /&gt;
      &lt;div align="center"&gt;&lt;font color="#FFFFFF" size="+1"&gt;&lt;b&gt;Quotation Form&lt;/b&gt;&lt;/font&gt;&lt;/div&gt;
      &lt;div class='ex'&gt;
      &lt;table  style="margin-top:15px;"&gt;
          &lt;tr&gt;
              &lt;td&gt;
                  &lt;div  style="width:150;height:20px; float:left; text-align:center"&gt;
                      &lt;font size="+1"&gt;Date:&lt;/font&gt;
                   &lt;/div&gt;
              &lt;/td&gt;
              &lt;td&gt;
                  &lt;div style="float:left;margin-left:20px; width:250px;"&gt;
                       &lt;?php                          
                             $fdate_default =$date;    
                             $todate_default =$date;
                             $myCalendar = new tc_calendar("fdate", true, false);     
                          $myCalendar-&gt;setIcon("../calendar/images/iconCalendar.gif");      
                          $myCalendar-&gt;setDate(date('d', strtotime($fdate_default))
                          , date('m', strtotime($fdate_default))
                          , date('Y', strtotime($fdate_default)));      
                          $myCalendar-&gt;setPath("../calendar/");     
                           $myCalendar-&gt;setYearInterval(1970, 2020);    
                             $myCalendar-&gt;setAlignment('left', 'bottom');        
                          $myCalendar-&gt;writeScript();    
                          $time=date("H:i:s");
                      ?&gt;   
                  &lt;input type="hidden" name="time" value="&lt;?php echo $time?&gt;"&gt;
                   &lt;/div&gt;
              &lt;/td&gt;
              &lt;td&gt;
                  &lt;div  style="width:200;height:20px; float:left; text-align:center"&gt;
                      &lt;font size="+1"&gt;Delivery Expected Date:&lt;/font&gt;
                   &lt;/div&gt;
              &lt;/td&gt;
              &lt;td&gt;
                  &lt;div style="float:left;margin-left:20px; width:250px;"&gt;
                       &lt;?php                          
                             $myCalendar = new tc_calendar("todate", true, false);     
                          $myCalendar-&gt;setIcon("../calendar/images/iconCalendar.gif");      
                          $myCalendar-&gt;setDate(date('d', strtotime($todate_default))
                          , date('m', strtotime($todate_default))
                          , date('Y', strtotime($todate_default)));      
                          $myCalendar-&gt;setPath("../calendar/");     
                           $myCalendar-&gt;setYearInterval(1970, 2020);    
                             $myCalendar-&gt;setAlignment('left', 'bottom');        
                          $myCalendar-&gt;writeScript();    
                          $time=date("H:i:s");
                      ?&gt;   
                  &lt;input type="text" name="expected_time" value="&lt;?php echo $time?&gt;"&gt;
                   &lt;/div&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;          
  
      &lt;div id='TextBoxesGroup'&gt;
          &lt;table border='1px' BORDERCOLOR='#98AFC7' style="margin-top:15px;"&gt;
          &lt;div id="TextBoxDiv1"&gt;
              &lt;tr&gt;
                  &lt;td&gt;
                      &lt;div style="width:150;height:20px; float:left; text-align:center"&gt;
                          &lt;font size="+1"&gt;Material:&lt;/font&gt;
                       &lt;/div&gt;
                  &lt;/td&gt;
                  &lt;td&gt;
                      &lt;div style="float:left;margin-left:20px;"&gt;
                          &lt;select class="nav" name="parent_cat" id="parent_cat"&gt;
                              &lt;?php echo $material;?&gt;
                             &lt;/select&gt; 
                      &lt;/div&gt;
                  &lt;/td&gt;
                  &lt;td&gt;
                      &lt;input class="button1 black" type="button" value="new" onClick=      "openWin()"&gt;
                  &lt;/td&gt;
                  &lt;td&gt;
                      &lt;div style="width:75;height:20px; float:left; text-align:center"&gt;
                          &lt;font size="+1"&gt;Make:&lt;/font&gt;
                       &lt;/div&gt;
                  &lt;/td&gt;
                     &lt;td&gt;
                      &lt;div style="float:left;margin-left:20px;"&gt;
                          &lt;select class="nav" name="sub_cat" id="sub_cat"&gt;&lt;/select&gt;
                      &lt;/div&gt;
                  &lt;/td&gt;
                  &lt;td&gt;                     
                          &lt;input type="button" class="button1 black" value="new" onClick="openWin1()"&gt;                       
                  &lt;/td&gt;
                  &lt;td&gt;
                      &lt;div style="margin-left:20px;"&gt;
                          &lt;input type='button' value='Add' id='addButton' style="width:auto" &gt;
                      &lt;/div&gt;
                  &lt;/td&gt;
                  &lt;td&gt;&lt;input type='button' value='Remove' id='removeButton' style="width:auto" &gt;&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
          &lt;table border='1px' BORDERCOLOR='#98AFC7'&gt;
              &lt;tr&gt;
                  &lt;td&gt;
                      &lt;div  style="width:150;height:20px; float:left; text-align:center"&gt;
                          &lt;font size="+1"&gt;Type:&lt;/font&gt;
                       &lt;/div&gt;
                  &lt;/td&gt;
                     &lt;td&gt;
                      &lt;div style="margin-left:20px;"&gt;
                          &lt;select class="nav" name="sub_cat11" id="sub_cat11"&gt;&lt;/select&gt;
                      &lt;/div&gt;
                  &lt;/td&gt;
                  &lt;td&gt;                     
                      &lt;input type="button" class="button1 black" value="new" onClick="openWin4()"&gt;                   
                  &lt;/td&gt;
                  &lt;td&gt;
                      &lt;div  style="width:150;height:20px; float:left; text-align:center"&gt;
                          &lt;font size="+1"&gt;Quantity:&lt;/font&gt;
                      &lt;/div&gt;
                  &lt;/td&gt;
                  &lt;td&gt;
                      &lt;div  style="margin-left:20px; float:left;"&gt;        
                          &lt;input type="text" name="quantity" id="quantity"&gt;
                      &lt;/div&gt;
                  &lt;/td&gt;
                  &lt;td&gt;
                      &lt;div  id="stock" name="stock" style="width:150px;height:20px; float:left;text-align:center; margin-left:10px;"&gt;        
                      &lt;/div&gt;
                  &lt;/td&gt;
  
              &lt;/tr&gt;
              &lt;tr&gt;
  
                  &lt;td&gt;
                      &lt;div  style="width:100px;height:20px; margin-left:20px; text-align:center"&gt;
                          &lt;font size="+1"&gt;Sales Detail:&lt;/font&gt;
                      &lt;/div&gt;
                  &lt;/td&gt;
                  &lt;td&gt;
                      &lt;div style="float:left;margin-left:20px;"&gt;
                          &lt;textarea rows="2" cols="25" name="s_price" id="s_price"&gt;&lt;/textarea&gt;
                      &lt;/div&gt;
                  &lt;/td&gt;
                  &lt;td&gt;
                      &lt;div style="float:left;margin-left:20px;width:100px;"&gt;
                          &lt;input type="checkbox" name="s_including" id="including" value="including"&gt;&lt;font size="+0"&gt;Including&lt;/font&gt;
                          &lt;input type="checkbox" name="s_including" id="excluding" value="excluding"&gt;&lt;font size="+0"&gt;Excluding&lt;/font&gt;
                          &lt;select name="s_excluding_tax" id="s_excluding_tax" class="nav"&gt;
                              &lt;?php echo $tax;?&gt;
                          &lt;/select&gt;
                      &lt;/div&gt;
                  &lt;/td&gt;                   
              &lt;/tr&gt;
          &lt;/div&gt;
          &lt;/table&gt;
      &lt;/div&gt;
  
      &lt;table align="center"&gt;
      &lt;tr&gt;
      &lt;td&gt;
          &lt;input type="submit" value="submit" name="submit" class="button1 blue"  /&gt;
      &lt;/td&gt;
      &lt;td&gt;
          &lt;input class="button1 blue" type="reset" value="Clear"&gt;
      &lt;/td&gt;
      &lt;td&gt;
          &lt;input  TYPE="Button" value="Close"  class="button1 blue" onClick="javascript:location.href=('dashboard.php');"&gt;
      &lt;/td&gt;
      &lt;/tr&gt;
      &lt;/table&gt;
     &lt;/div&gt;
      &lt;/form&gt;
      &lt;/body&gt;
  &lt;/html&gt; 
  </code></pre>
  
  <p>This is my html page I want to insert multiple column value and insert into database is perfectly but all material and maker value insert into single column but i want to insert value all product1 ,2,3 etc in different column if i select 3 times than 3 material in three different column it is possible because I am new in php and not getting solution properly 
  Here my php code</p>