serializeArray() gives empty array
<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>