title: serializeArray() gives empty array
body: <p>I'm trying to use <strong><em><code>.seralizeArray()</code></em></strong> to harvest form inputs values.</p>
  
  <p>The input fields consist of a list of item with respective corresponding prices; I would like to save each value against its corresponding key pair but keep getting an error: <code>... empty array with 0 length</code>.</p>
  
  <p>I've tried a few combinations of selectors but still get <code>[]</code>. </p>
  
  <p>How can I serialize successfully?</p>
  
  <p>Below is my code:</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;fieldset id='itemInformation'&gt;
      &lt;h2&gt;Items&lt;/h2&gt;
      &lt;div class="itemGroup"&gt;
          &lt;input type="text" id="item1Name" value="Item 1" class="itemNames"&gt;
          &lt;input type="number" step="0.01" id="item1Price" value="0.00"&gt;
      &lt;/div&gt;
      &lt;div class="itemGroup"&gt;
          &lt;input type="text" id="item2Name" value="Item 2" class="itemNames"&gt;
          &lt;input type="number" step="0.01" id="item2Price" value="0.00"&gt;
      &lt;/div&gt;
      &lt;div class="itemGroup"&gt;
          &lt;input type="text" id="item3Name" value="Item 3" class="itemNames"&gt;
          &lt;input type="number" step="0.01" id="item3Price" value="0.00"&gt;
      &lt;/div&gt;
  
      &lt;div class="changeNumber"&gt;
          &lt;button class="increase"&gt;&amp;#43;&lt;/button&gt;
          &lt;button class="decrease"&gt;&amp;#8211;&lt;/button&gt;
      &lt;/div&gt;
      &lt;div class="buttons"&gt;
          &lt;button class="previousButton btn"&gt;Previous&lt;/button&gt;
          &lt;button class="nextButton btn"&gt;Next&lt;/button&gt;
      &lt;/div&gt;
  &lt;/fieldset&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>$('#itemInformation .nextButton').bind('click', function (event) {
      event.preventDefault()
  
      console.log($('.itemGroup').serializeArray())
  })
  </code></pre>