I am creating a product configurator with Jquery. My users can add custom text lines to their product. So you could create say... 4 text lines with custom text.

I need to know what the best way to add and delete these lines would be. Currently I have the following code for adding lines...

    //Add Text Button
$('a#addText').live('click', function(event) {
    event.preventDefault();

    //Scroll up the text editor
    $('.textOptions').slideUp();
    $('#customText').val('');

    //count how many items are in the ul textList
    var textItems = $('ul#textList li').size();
    var nextNumber = textItems + 1;

    if(textItems <= 5) {

        //Change input to reflect current text being changed
        $('input#currentTextNumber').val(nextNumber);

        //Append a UL Item to the textList
        $('ul#textList').append('<li id="textItem'+nextNumber+'">Text Line. +$5.00 <a class="deleteTextItem" href="'+nextNumber+'">Delete</a></li>');

        //Scroll down the text editor
        $('.textOptions').slideDown();

    }else {

        alert('you can have a maximum of 6 textual inputs!');   

    }
});

I'm probably not doing this the best way, but basically i have an empty UL list to start with. So when they click "Add Text Line" it finds out how many list elements are in the unordered list, adds a value of 1 to that and places a new list element with the id TextItem1 or TextItem2 or whatever number we're on.

The problem i'm running into is that when you click delete item, it screws everything up because when you add an item again all the numbers aren't correct. I thought about writing some kind of logic that says all the numbers above the one you want deleted get 1 subtracted from their value and all the numbers below stay the same. But I think i'm just going about this the wrong way.

Any suggestions on the easiest way to add and delete these text lines is appreciated.