How to re-index select box along with hidden fields
<p>I'm struggling to figure out how to re-index (?) a series of hidden fields with jQuery/Javascript. The sample code below is generated each time a user clicks a create button. The numerical value applied to the hidden fields within tier[] is the index of an option selected from a drop-down.</p>

<p>The problem I have is every block of code (except the first i.e. tier1) should have the option to be removed. When the remove link is clicked I have implemented some jQuery which removes the div with the selected ID. The main issue is that I need to alter the name of each block on removal and re-index the drop-down so the numbers are incremental. The hidden fields will need to follow the index of the drop-down too.</p>

<p>I'm struggling to determine how to achieve this with Javascript or jQuery.</p>

<p>I've tried to include an example before any removal occurs. There are 4 blocks, each is incrementally created based on the option from the drop-down. A user could attempt to remove block 3. Currently, this will remove the option from the select using the above jQuery but as a result the display will list inconsistent block numbers, the hidden fields will have the incorrect indexes and the drop-down will be 'out of synch'.</p>

<pre><code>&lt;script type="text/javascript"&gt; 
    $(document).ready(function() {  
        $("a.removeTier").live('click', function() {
            var tierId = $(this).parent().parent().attr('id').match(/\d+$/);
            $('#tiers option:eq('+tierId+')').remove();
            $('#tier'+tierId).remove();             
            return false;               
        });
    });
&lt;/script&gt;

&lt;p align="left"&gt;
    &lt;label style="width: 45px;" for="newTier"&gt;&lt;b&gt;Tier:&lt;/b&gt; *&lt;/label&gt;
    &lt;button style="width: 70px; font-size: 11px;" value="New Tier" id="newTier" name="newTier"&gt;New Tier&lt;/button&gt;
    &lt;select name="tiers" id="tiers"&gt;
        &lt;option value="0"&gt;Select&lt;/option&gt;                               
        &lt;option selected="" value="1"&gt;Tier 1&lt;/option&gt;
        &lt;option value="2"&gt;Tier 2&lt;/option&gt;
        &lt;option value="3"&gt;Tier 3&lt;/option&gt;
        &lt;option value="4"&gt;Tier 4&lt;/option&gt;
    &lt;/select&gt;
&lt;/p&gt;

&lt;div id="tierRight"&gt;    

    //1
    &lt;div id="tier1"&gt;
        &lt;div style="text-align: left;"&gt;
            Tier 1&lt;br&gt;&lt;label for="publication_date_1"&gt;Publication Date: &lt;/label&gt;
            &lt;input type="text" value="" readonly="readonly" name="tier[1][publication_date]" id="publication_date_1" size="10" maxlength="10" class="publication_date hasDatepicker"&gt;           &lt;input type="hidden" value="2010-09-01" name="tier[1][publication_date_db]" id="publication_date_db_1"&gt;
        &lt;/div&gt;
        &lt;span&gt;
            &lt;a class="removePanel" id="panel132" title="Remove `Autism Initiatives` from `Tier 1`" href="#"&gt;Autism Initiatives&lt;/a&gt;
            &lt;input type="hidden" value="132" name="tier[1][panels][132][panelId]"&gt;
            &lt;input type="hidden" value="Autism Initiatives" name="tier[1][panels][132][panelName]"&gt;
        &lt;/span&gt; 
    &lt;/div&gt;&lt;br&gt;

    //2
    &lt;div id="tier2"&gt;
        &lt;div style="text-align: left;"&gt;
            Tier 2 - [&lt;a id="tier2" class="removeTier" title="Remove Tier" href="#"&gt;Remove&lt;/a&gt;]&lt;br&gt;&lt;label for="tier[2][publication_date]"&gt;Publication Date: &lt;/label&gt;
            &lt;input type="text" value="" readonly="readonly" name="tier[2][publication_date]" id="publication_date_2" size="10" maxlength="10" class="publication_date hasDatepicker"&gt;
            &lt;input type="hidden" name="tier[2][publication_date_db]" id="publication_date_db_2" value="2010-09-08"&gt;
        &lt;/div&gt;
        &lt;span&gt;
            &lt;a class="removePanel" id="panel149" title="Remove `Autism 2` from `Tier 2`" href="#"&gt;Autism 2&lt;/a&gt;
            &lt;input type="hidden" value="149" name="tier[2][panels][149][panelId]"&gt;
            &lt;input type="hidden" value="Autism 2" name="tier[2][panels][149][panelName]"&gt;
        &lt;/span&gt;
    &lt;/div&gt;&lt;br&gt;

    //3
    &lt;div id="tier3"&gt;
        &lt;div style="text-align: left;"&gt;
            Tier 3 - [&lt;a id="tier3" class="removeTier" title="Remove Tier" href="#"&gt;Remove&lt;/a&gt;]&lt;br&gt;&lt;label for="tier[3][publication_date]"&gt;Publication Date: &lt;/label&gt;
            &lt;input type="text" value="" readonly="readonly" name="tier[3][publication_date]" id="publication_date_3" size="10" maxlength="10" class="publication_date hasDatepicker"&gt;
            &lt;input type="hidden" name="tier[3][publication_date_db]" id="publication_date_db_3" value="2010-09-15"&gt;
        &lt;/div&gt;
        &lt;span&gt;
            &lt;a class="removePanel" id="panel150" title="Remove `Autism 3` from `Tier 3`" href="#"&gt;Autism 3&lt;/a&gt;
            &lt;input type="hidden" value="150" name="tier[3][panels][150][panelId]"&gt;
            &lt;input type="hidden" value="Autism 3" name="tier[3][panels][150][panelName]"&gt;
        &lt;/span&gt;
    &lt;/div&gt;&lt;br&gt;

    //4
    &lt;div id="tier4"&gt;
        &lt;div style="text-align: left;"&gt;
            Tier 4 - [&lt;a id="tier4" class="removeTier" title="Remove Tier" href="#"&gt;Remove&lt;/a&gt;]&lt;br&gt;&lt;label for="tier[4][publication_date]"&gt;Publication Date: &lt;/label&gt;
            &lt;input type="text" value="" readonly="readonly" name="tier[4][publication_date]" id="publication_date_4" size="10" maxlength="10" class="publication_date hasDatepicker"&gt;
            &lt;input type="hidden" name="tier[4][publication_date_db]" id="publication_date_db_4" value="2010-09-22"&gt;
        &lt;/div&gt;
        &lt;span&gt;
            &lt;a class="removePanel" id="panel151" title="Remove `Autism 4` from `Tier 4`" href="#"&gt;Autism 4&lt;/a&gt;
            &lt;input type="hidden" value="151" name="tier[4][panels][151][panelId]"&gt;
            &lt;input type="hidden" value="Autism 4" name="tier[4][panels][151][panelName]"&gt;
        &lt;/span&gt;
    &lt;/div&gt;&lt;br&gt;
&lt;/div&gt;
</code></pre>
