title: Use jQuery to increment array in field name
body: <p>I have a form that allows users to automatically add blocks of fields to it.  For various reasons these fields need to be associated with other fields in their blocks.  I am accomplishing this by putting all my fields in each block in an array like you see below </p>
  
  <pre><code>&lt;select name="items[0][item_type]" class="item_type"&gt;
       &lt;option value="0"&gt;Bulding / Landscaping&lt;/option&gt; 
       &lt;option value="1"&gt;Full / Thin Veneer&lt;/option&gt; 
  &lt;/select&gt;
  
  &lt;select class="select_custom" name="items[0][standard]"&gt;
        &lt;option value="0"&gt;Standard&lt;/option&gt; 
        &lt;option value="1"&gt;Custom&lt;/option&gt; 
  &lt;/select&gt;
  </code></pre>
  
  <p>This will give me back something like <code>Array ( [0] =&gt; Array ( [item_type] =&gt; 0 [standard] =&gt; 1 ) )</code> which will allow me to easily handle the data on the back end. </p>
  
  <p>The problem is that the array index must be specified in order for this to work.  When I append a new block of fields like the one above I need a way to change the index on all the <code>items[][fieldname]</code>.  </p>
  
  <p>Below is the code that I use to append the block of inputs to the document.  They are all contained within a div so I simply clone that div and append it after the last one. </p>
  
  <pre><code>$('#more_fields').click(function(){
      $('.field_group:first').clone(true).hide().insertAfter('.field_group:last').slideDown('slow');
          var last = $('.field_group:last');
          last.append(new_button.clone(true));
          last.find('select').val([]);
          last.find(".custom_products").css("display","none");
          last.find(".unit_selection").css("display","none");
          last.find(".landscape_selection").css("display","none");
          last.find(".veneer_selection").css("display","none");
          last.find(".comments_section").css("display","none");
          last.find(".standard").css('display','none');
      });
  </code></pre>