title: Insert dynamic input fields into database
body: <p>I have successfully add &amp; remove the dynamic input fields. However, I am facing a problem on inserting the input fields' values into my database. Any input on this would be appreciated. Thank you. </p>
  
  <p>Input fields</p>
  
  <pre><code>    &lt;div id = "container"&gt; 
          &lt;p class = "origin-box"&gt;
              &lt;label for = "Origin"&gt;From &lt;span class = "box-number1"&gt;:&lt;/span&gt;&lt;/label&gt;
              &lt;input type = "text" name = "Origin" value = "" id = "Origin"/&gt;
               &lt;a class = "add-box" href = "#" name = "addBox"&gt;&lt;img src = "Add Button.png" width = "35" height = "35" hspace = "20" vspace = "10" align = "middle"/&gt;&lt;/a&gt;
          &lt;/p&gt;
  
          &lt;p class = "destination-box"&gt;
              &lt;label for = "Destination"&gt;To &lt;span class = "box-number2"&gt;:&lt;/span&gt;&lt;/label&gt;
              &lt;input type = "text" name = "Destination" value = "" id = "Destination"/&gt;
          &lt;/p&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>JQuery for dynamically adding/removing input fields.</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  jQuery(document).ready(function($){
  var counter = 1;
  var max_fields = 10;
  $('.my-form .add-box').click(function(e){
      e.preventDefault();
      if (counter &lt; max_fields){
          counter++;
          $('#container').append(
              '&lt;div&gt;&lt;strong&gt;Link #' + counter + '&lt;/strong&gt;&lt;br /&gt;' 
              + '&lt;input id="field_' + counter + '" name="fields[]' + '" type="text" placeholder = "From" /&gt;&lt;a href = "#" class = "remove-box"&gt;&lt;img src = "Remove Button.png" height = "35" width = "35" align = "middle"/&gt;&lt;/a&gt;&lt;/div&gt;&lt;br /&gt;' );
      }
  });
  
  $('.my-form').on('click', '.remove-box', function(e){
      $(this).parent().css( 'background-color', '#FF6C6C' );
      $(this).parent().slideUp("fast","linear", function() {
          e.preventDefault();
          $(this).closest('div').remove();    //$(this) references the closest &lt;div&gt;
          counter--;
      });
      return false;
  });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>After clicked on Submit button.</p>
  
  <p><code>&lt;p&gt;&lt;input id = "btnSubmit" type = "submit" name= "submit" value = "Submit" /&gt;&lt;/p&gt;</code></p>
  
  <p>SQL statement for data insertion to database's tables.</p>
  
  <pre><code>if(isset($_POST['btnSubmit'])){
       //create instance of database class
  $db = new mysqldb();
  $db-&gt;select_db();
  //Check if user has actually added additional fields to prevent a php error
  if ($_POST['fields']) {
  
      //get last inserted userid
      $inserted_user_id = $db-&gt;last_insert_id();
  
      //Loop through added fields
      foreach ( $_POST['fields'] as $key=&gt;$value ) {
  
          //Insert into transport table
          $sql_transport = sprintf("INSERT INTO tbl_transport (Origin) VALUES ('%s')",
              mysql_real_escape_string($value));  
          $result_transport = $db-&gt;query($sql_transport);
          $inserted_transport_id = $db-&gt;last_insert_id(); 
  
          //Insert into mainclaim table
          $sql_mainclaim = sprintf("INSERT INTO tbl_mainclaim (transportID) VALUES ('%s')",
                                 mysql_real_escape_string($inserted_transport_id));  
          $result_mainclaim = $db-&gt;query($sql_mainclaim);
      }
  } else {    
      //No additional fields added by user
  }
  //disconnect mysql connection
  $db-&gt;kill();
  }
  </code></pre>