How can I AJAX-populate groups of form elements in a way that is accessible with PHP? -

i'm working on form begins search auto-complete (ajax, jquery ui) field allows users select record exists in database. when record chosen, fields in rest of form completed user. works well.

within form there group of fields describe 'widget.' example of markup exists before auto-complete fired;

<fieldset id="widgets">     <div id="widget_1">         <input type="text" name="widgets[0][name]" />         <input type="text" name="widgets[0][color]" />         <input type="text" name="widgets[0][shape]" />         <input type="text" name="widgets[0][size]" />     </div> </fieldset> 

i've structured name attributes in manner hoping i'll nice structure on back-end when form submitted. markup exists when page loads allow users add widget record if none exist.

i'm imagining when additional widgets added structure become this. should note there should group of widget fields empty @ bottom in order users add new widget existing record.

<fieldset id="widgets">     <div id="widget_1">         <input type="text" name="widgets[1][name]" value="alpha" />         <input type="text" name="widgets[1][color]" value="red" />         <input type="text" name="widgets[1][shape]" value="triangle" />         <input type="text" name="widgets[1][size]" value="large" />     </div>      <div id="widget_2">         <input type="text" name="widgets[2][name]" />         <input type="text" name="widgets[2][color]" />         <input type="text" name="widgets[2][shape]" />         <input type="text" name="widgets[2][size]" />     </div>      ...  </fieldset> 

the auto-complete ajax returns nice json structure includes array every record widgets parse through.

what's best way handle adding grouped widget fields structure? adding incrementing id wrapper way me keeps tabs on what's-in-which row (or data-attributes better)?

i'm trying better handle on how should tackle this.