title: Preserve grouping when serializing form data
body: <p>I have an HTML form with similar groups of input elements. </p>
  
  <p>How can I serialize the form data while preserving the grouping, without iterating the input elements?</p>
  
  <p>I'm open to changing the form structure if it is necessary to achieve the goal.</p>
  
  <p><strong>Example input:</strong></p>
  
  <pre><code>&lt;form id="form"&gt;
    &lt;div&gt;
      &lt;input name="id" value="1" type="hidden"&gt;
      &lt;input name="quantity" value="10"&gt;
    &lt;/div&gt;
    &lt;div&gt;
      &lt;input name="id" value="2" type="hidden"&gt;
      &lt;input name="quantity" value="20"&gt;
    &lt;/div&gt;
    &lt;div&gt;
      &lt;input name="id" value="3" type="hidden"&gt;
      &lt;input name="quantity" value="30"&gt;
    &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p><strong>Expected output:</strong></p>
  
  <pre><code>{
    "1": { "id": "1","quantity": "10" },
    "2": { "id": "2","quantity": "20" },
    "3": { "id": "3","quantity": "30" }
  }
  </code></pre>
  
  <p>I tried:</p>
  
  <pre><code>console.log($('#form').serializeArray());
  </code></pre>
  
  <p>But the form data was not grouped:</p>
  
  <pre><code>[
    {"name":"id","value":"1"},{"name":"quantity","value":"10"},
    {"name":"id","value":"2"},{"name":"quantity","value":"20"},
    {"name":"id","value":"3"},{"name":"quantity","value":"30"}
  ]
  </code></pre>