How to name input fields dynamically?
<p>I have multiple of this div in my form generated dynamically by the user </p>

<pre><code>&lt;div class="property-container"&gt;
 &lt;input type="hidden" name="proposal[process][systems][1][id]"&gt;
 &lt;input type="hidden" name="proposal[process][systems][1][name]"&gt;
 &lt;input type="hidden" name="proposal[process][systems][1][stations][2][id]"&gt;
 &lt;input type="hidden" name="proposal[process][systems][1][stations][2][name]"&gt;
 &lt;input type="hidden" name="proposal[process][systems][1][stations][2][price]"&gt;
&lt;/div&gt;
</code></pre>

<p>And this is how I name them using jQuery</p>

<pre><code>    stationFieldsNames:function(station_container, system_id){
        var hidden = station_container.find('.property-container input[type=hidden]:first');
        station_container.find('.property-container').each(function(propCon){
        hidden.attr('name','proposal[process][systems]['+ system_id +'][id]');
        hidden.next().attr('name','proposal[process][systems]['+ system_id +'][name]');
        hidden.next().next().attr('name','proposal[process][systems]['+ system_id +'][stations]['+propCon+'][id]');
        hidden.next().next().next().attr('name','proposal[process][systems]['+ system_id +'][stations]['+propCon+'][name]');
        hidden.next().next().next().next().attr('name','proposal[process][systems]['+ system_id +'][stations]['+propCon+'][price]');
        });
    }
</code></pre>

<p>The problem I have with this is that I get duplicated field names. When I submit the form I see in the array that the data is missing. Where do I do wrong?</p>
