title: How to send value of input created from a jquery for loop to php using ajax
body: <p>I have a button that adds new fields to my form, ans another button that submits the value of the input fields to the server side (php).
  I'm trying to get the best way to send values from dynamically created form input to php.</p>
  
  <p>here is what i have tried </p>
  
  <pre><code>$('#submit').on("click", function(e) {
     e.preventDefault();
     for(var i = 1; i &lt;= 9; i++) {
  
       if ($('label[name="men'+i+'"]').length) { //for each [i] check if man field exist 
         var manName  = $('select[id="manName'+i+'"]').val();
         var manAge  = $('select[id="manAge'+i+'"]').val();
         if (manName.length &lt; 1) {
           //show input error on the form
         } else {
           //set value for each manName field created 
           window["manName" + i] = manName;
         }
  
         if (manAge.length &lt; 1) {
           //show input error on the form
         } else {
           //set value for each manAge field created 
           window["manAge" + i] = manAge;
         }
       }
     } else {
       //if man field [i] was not created
       window["manName" + i] = "";
       window["manAge" + i] = "";
       //set man field [i] to empty/null
     }
  
   //and more of the above to check for women and children fields
  
  }
  </code></pre>
  
  <p>then in my ajax i have </p>
  
  <pre><code>$.ajax
     ({
     type:"POST",
     url: "send.php",
     data: {"manName1": manName1, "manAge1": manAge1, "manName2": manName2, "manAge2": manAge2, "manName3": manName3, "manAge3": manAge3, "womanName1": womanName1, "womanAge1": womanAge1, "womanName2": womanName2, "womanAge2": womanAge2 }, //and so on for the rest of the women and children
      //cache: false,
      success: function(data) { 
      console.log(data)
      }
      });
  </code></pre>
  
  <p>this works, but freezes for a while before it responds. </p>
  
  <p>So is there a proper way of doing this </p>