Re-index a series of hidden fields and a select box

Question

Hi,

I'm working on a small project at the moment and have a requirement to re-name/re-index some fields, display items.

Initially, the user is presented with a drop-down with an option to add a new item. If the user adds a new item it will append a new option to select box and give the option a new value (The value of the previous item plus one).

The user can then add items to each of the options, when an item is added to a option, it is assigned hidden fields with the value of the option as the array key.

e.g. <input type="hidden" value="160" name="tier[6][panels][160][panelId]">

A option can have multiple items assigned to it, hence the naming convention.

I've come to realise that each grouping of option items can be removed. The way I do this at the moment is to simple use remove() to delete the groupings and then remove the option from the drop down.

There is a problem with this in that the numbering of the options will be out of sync and the groupings will be as well.

For instance, if the options are 1, 2, 3, 4, 5 there will be 5 groupings. But if the user decides they no longer require 2 and 3. The select box will have 1, 4 and 5 to select and assign to. Plus, the display of the groupings will be incorrect.

How can I re-index the select box and at the same time alter the groupings?

Sample Data:

<script type="text/javascript"> 
    $(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;               
        });
    });
</script>

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

<div id="tierRight">    

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

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

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

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