How to re-index select box along with hidden fields

Question

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.

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.

I'm struggling to determine how to achieve this with Javascript or jQuery.

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'.

<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>

Answer 1

First you'll need to clean up your HTML - you're using id="tier1" on both a div and a a which will eventually cause problems.

Here's a simple variant that shows a possible approach:

<div class="tier">
    <p class="title">Tier 1</p>
</div>
<div class="tier">
    <p class="title">Tier 2</p>
    <p class="delete">Delete Me</p>
</div>
<div class="tier">
    <p class="title">Tier 3</p>
    <p class="delete">Delete Me</p>
</div>

Javascript:

$(function() {
   $(".delete").bind("click", function() { 
       $(this).parent().remove();
       $(".tier").each( function(index) {
           var tierIndex = index+1;
           $(this).find(".title").text("Tier " + tierIndex);
       });
   });
});

Or as a jsFiddle here.