title: Save Dynamic textbox to Database
body: <p>Hello guys I have this code below which will dynamically add textbox per click. my question is How can i save the dynamically created textbox into MYSQL Database </p>
  
  <p>i want to save each textbox in each row. meaning one text box = one row</p>
  
  <p>e.g</p>
  
  <pre><code>ID | NAME | Training (the textbox)|
  1    john   Driving
  2    john   swimming
  3    john   running
  
  &lt;!DOCTYPE html&gt;
      &lt;html&gt;
      &lt;head&gt;
      &lt;title&gt;Add or Remove text boxes with jQuery&lt;/title&gt;
      &lt;script type="text/javascript" src="//code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;
      &lt;style type="text/css"&gt;
      &lt;!--
      #main {
          max-width: 800px;
          margin: 0 auto;
      }
      --&gt;
      &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
      &lt;div id="main"&gt;
          &lt;h1&gt;Add or Remove text boxes with jQuery&lt;/h1&gt;
          &lt;div class="my-form"&gt;
              &lt;form role="form" method="post"&gt;
                    &lt;label for="box1"&gt;&lt;span class="namer"&gt;Name&lt;/span&gt;&lt;/label&gt;
                     &lt;input type="text" name="name" /&gt;
                  &lt;p class="text-box"&gt;
                      &lt;label for="box1"&gt;Box &lt;span class="box-number"&gt;1&lt;/span&gt;&lt;/label&gt;
                      &lt;input type="text" name="boxes[]" value="" id="box1" /&gt;
                      &lt;a class="add-box" href="#"&gt;Add More&lt;/a&gt;
                  &lt;/p&gt;
                  &lt;p&gt;&lt;input type="submit" value="Submit" /&gt;&lt;/p&gt;
              &lt;/form&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;script type="text/javascript"&gt;
      jQuery(document).ready(function($){
          $('.my-form .add-box').click(function(){
              var n = $('.text-box').length + 1;
              if( 5 &lt; n ) {
                  alert('Stop it!');
                  return false;
              }
              var box_html = $('&lt;p class="text-box"&gt;&lt;label for="box' + n + '"&gt;Box &lt;span class="box-number"&gt;' + n + '&lt;/span&gt;&lt;/label&gt; &lt;input type="text" name="boxes[]" value="" id="box' + n + '" /&gt; &lt;a href="#" class="remove-box"&gt;Remove&lt;/a&gt;&lt;/p&gt;');
              box_html.hide();
              $('.my-form p.text-box:last').after(box_html);
              box_html.fadeIn('slow');
              return false;
          });
          $('.my-form').on('click', '.remove-box', function(){
              $(this).parent().css( 'background-color', '#FF6C6C' );
              $(this).parent().fadeOut("slow", function() {
                  $(this).remove();
                  $('.box-number').each(function(index){
                      $(this).text( index + 1 );
                  });
              });
              return false;
          });
      });
      &lt;/script&gt;
      &lt;/body&gt;
      &lt;/html&gt;
  
  
  
      // MY PHP Insert code
  
      &lt;?php   
      $con = mysql_connect("localhost","root","");
      if (!$con){
      die("Can not connect: " . mysql_error());
      }
      mysql_select_db("SLL",$con);
  
  //please assume boxes = training
  
      $name = $_POST['name'];
      $training= $_POST['boxes'];
  
      $AddQuery ="INSERT INTO db (name,training)VALUES ($name,training)"
  
     mysql_query($AddQuery, $con);
      ?&gt;
  </code></pre>