title: ajax with multiple records to insert into database
body: <p>I have a block of code which is a dynamically generated div with a form (based on array loop) that has dynamic inputs which are added by a button:</p>
  
  <pre><code>&lt;?php foreach($tickerDisplays as $key =&gt; $ticker):?&gt;
  
      &lt;form id="Items" method="post"&gt;
          &lt;label id="ItemLabel"&gt;Item 1: &lt;/label&gt;
          &lt;input type="text" name="Items[]"&gt;&lt;br/&gt;
          &lt;button type="button" class="moreItems_add"&gt;+&lt;/button&gt;
  
          &lt;input type="hidden" name="tickerID" id="tickerID" value="&lt;?php echo $ticker['ticker'] ?&gt;"&gt;
          &lt;input type="submit" name="saveTickerItems" value="Save Ticker Items"&gt;  
      &lt;/form&gt;
  
  &lt;?php endforeach;?&gt;
  
  
  &lt;script type="text/javascript"&gt;
  
  $("button.moreItems_add").on("click", function(e) {
  var tickerID = $('#tickerID').val();
    var numItems = $("input[type='text']", $(this).closest("form")).length;
    if (numItems &lt; 10) {
      var html = '&lt;label class="ItemLabel"&gt;Item ' + (numItems + 1) + ': &lt;/label&gt;';
      html += '&lt;input type="text" name="Items[]"/&gt;&lt;br/&gt;';
      $(this).before(html);
      console.log(tickerID);
    }
  });
  
  &lt;/script&gt;
  </code></pre>
  
  <p>That code above is working and simply allows the '+' button to add a new input. I'm getting the input values as well as the tickerID from my hidden input in preparation for ajax submission. I'm getting what I expect from the serialized form but I have an issue.</p>
  
  <p>The following code:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $("#Items").submit(function(e) {
          e.preventDefault();
          var data = $("#Items").serialize();
          console.log(data);
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>Prints this:</p>
  
  <pre><code>Items%5B%5D=this&amp;Items%5B%5D=is&amp;Items%5B%5D=test&amp;tickerID=1
  </code></pre>
  
  <p>Which I expect. The problem is that with my ajax call to my mysql insert function, I need to insert one record for each value plus the tickerID. My sql insert is inserting into columns tickerID and content. So for the above console.log, I would need the following insert:</p>
  
  <pre><code>tickerID   |   content
  ----------------------
  1               this
  1               is
  1               test
  </code></pre>
  
  <p>How can I properly pass my form data to the ajax and then do something like a foreach in order to insert multiple  records?</p>
  
  <p>ajax call</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
  $("#Items").submit(function(e) {
  
      $.ajax({
         type: "POST",
         url: addticker.php,
         data: form.serialize(), // serializes the form's elements.
         success: function(data)
         {
             alert(data); // show response from the php script.
         }
       });
  
      e.preventDefault(); // avoid to execute the actual submit of the form.
  });
  
  &lt;/script&gt;
  </code></pre>
  
  <p>addticker.php</p>
  
  <pre><code>$tickerID = $_POST[''];
  $content = $_POST[''];
  
  $addTicker = "
      INSERT INTO tickerTable (tickerID, content)
      values ('$tickerID', '$content');
  "
  $mysqlConn-&gt;query($addTicker)
  </code></pre>