title: Store form data in a array?
body: <p>Need help storing form data in an array.</p>
  
  <p>The form has an option to display additional fields. How do I get the additional field values to display in the data array.</p>
  
  <pre><code>&lt;form id="myForm"&gt;
      &lt;div id="input1" style="margin-bottom:4px;" class="clonedInput"&gt;
  
          &lt;p&gt;Please Enter Your First Name Last Name&lt;/p&gt;
          &lt;div style="border:1px solid black;padding:5px"&gt;
              &lt;label for="first1"&gt;first:&lt;/label&gt;
              &lt;input type="text" name="first1" id="first1" /&gt;&lt;br /&gt;
  
              &lt;label for="last1"&gt;last:&lt;/label&gt;
              &lt;input type="text" name="last1" id="last1" /&gt;&lt;br /&gt;
          &lt;/div&gt;
  
          &lt;p&gt;Please Enter Your Address&lt;/p&gt;
          &lt;div style="border:1px solid black;padding:5px"&gt;    
              &lt;label for="add1"&gt;address:&lt;/label&gt;
              &lt;input type="text" name="add1" id="add1" /&gt;&lt;br /&gt;
  
              &lt;select class="period" id="hour1" name="hour1"&gt;                                         
                  &lt;option value="1"&gt;1&lt;/option&gt;
                  &lt;option value="2"&gt;2&lt;/option&gt;
                  &lt;option value="3"&gt;3&lt;/option&gt;
                  &lt;option value="4"&gt;4&lt;/option&gt;
                  &lt;option value="5"&gt;5&lt;/option&gt;
                  &lt;option value="6"&gt;6&lt;/option&gt;
                  &lt;option value="7"&gt;7&lt;/option&gt;
                  &lt;option value="8"&gt;8&lt;/option&gt;
                  &lt;option value="9"&gt;9&lt;/option&gt;
                  &lt;option value="10"&gt;10&lt;/option&gt;
                  &lt;option value="11"&gt;11&lt;/option&gt;
                  &lt;option value="12" selected&gt;12&lt;/option&gt;
              &lt;/select&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div&gt;
          &lt;input type="button" id="btnAdd" value="add another name" /&gt;
      &lt;/div&gt;
  
      &lt;div style="padding-top:30px"&gt;
          &lt;input type="button" id="submit" value="submit to Object" /&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  
  var storeData = {          
      "firstname": "",
      "lastname": "",           
      "address": "",
      "hour": ""
  };
  
  $('#btnAdd').click(function() {
     var num = $('.clonedInput').length;
     var newNum  = new Number(num + 1);
  
     var newElem = $('#input' + num).clone().attr('id', 'input' + newNum);        
     newElem.children(':first').attr('id', 'name' + newNum).attr('name', 'name' + newNum);
  
     $('#input' + num).after(newElem);
  
      });
  
  $('#submit').click(function() {
  
      var firstname =  $('#first1').val();
      var lastname =  $('#last1').val();
      var address =  $('#add1').val(); 
      var hour =  $('#hour1').val();
  
      storeData.firstname = firstname;
      storeData.lastname = lastname;
      storeData.address = address;
      storeData.hour = hour;    
  
      console.log(storeData);
  });
  </code></pre>
  
  <p>Here is my working example. </p>
  
  <p><a href="http://jsfiddle.net/FFueC/8/" rel="nofollow">http://jsfiddle.net/FFueC/8/</a></p>
  
  <p>Note the first fields values are set in the data array but when you add additional fields they are not. </p>