title: Jquery Ajax POST is not getting dynamically added inputs inputs have names and I have tried other solutions
body: <p>Ajax Post request is only getting the first of the dynamically added input fields at the bottom all others are ignored</p>
  
  <p>I have tried <code>.on()</code> <code>.live()</code> <code>.submit()</code> functions but get the same result. My php file consists of a <code>print_r($_POST);</code> and nothing else this is put into the console.</p>
  
  <p><a href="https://pastebin.com/CuAPSzKe" rel="nofollow noreferrer">https://pastebin.com/CuAPSzKe</a> - I have put the full code on the pastebin as the whole table and the script used to add the new inputs is included.</p>
  
  <p>This is the code to make the call:</p>
  
  <pre><code>$('input#submitButton').on('click', function(e)  {
  
  e.preventDefault(); // avoid to execute the actual submit of the form.
  
  var form = $('form#orderForm');
  var url = form.attr('action');
  
  $.ajax({
    type: "POST",
    url: url,
    data: form.serialize(), // serializes the form's elements.
    success: function(data)
    {
  
      console.log(data);
  
    }
  });
  
  
  });
  </code></pre>
  
  <p>My expected result is to be able to post all dynamically added fields with their names as an array, alternatively all dynamically added fields in their own array.</p>