Adding and removing textbox elements

I manage to find code online that allows me to remove and add textbox. However, i am trying to modify the codes to suit my situation of adding and removing textbox in separate iterations all on the 开发者_如何学Gosame page and these codes does not allow me to do that..Here's my code for adding and removing:

                $('#btnAdd').click(function() {
                var num     = $('.clonedInput').length; // how many "duplicatable" input fields we currently have
                var newNum  = new Number(num + 1);      // the numeric ID of the new input field being added
                // create the new element via clone(), and manipulate it's ID using newNum value
                var newElem = $('#input' + num).clone().attr('id', 'input' + newNum);
                // manipulate the name/id values of the input inside the new element
                newElem.children(':first').attr('id', 'name' + newNum).attr('name', 'name' + newNum);
                //prepend table code
                $('#input' + num).append('<tr><td colspan="2"><label>');
                // insert the new element after the last "duplicatable" input field
                $('#input' + num).after(newElem);
                //prepend table code
                $('#input' + newNum).append('</label></td></tr>');
                // enable the "remove" button
                $('#btnDel').attr('disabled','');
                // business rule: you can only add XXX times
                if (newNum == 5)
                    $('#btnAdd').attr('disabled','disabled');

                return false
                    });

            $('#btnDel').click(function() {
                var num = $('.clonedInput').length; // how many "duplicatable" input fields we currently have
                $('#input' + num).remove();     // remove the last element
                // enable the "add" button
                $('#btnAdd').attr('disabled','');
                // if only one element remains, disable the "remove" button
                if (num-1 == 1)
                    $('#btnDel').attr('disabled','disabled');

                return false    
                });



            $('#btnDel').attr('disabled','disabled');

Here's a link to the idea of what i mean: The '+' & '-' signs are what the codes are used for but they cannot be used on separate occasions...what can i do to make them usable on the same html page regardless of the number of iterations i intend to increase or decrease?

First of all I think you should try to write a plugin and start here for example. Then you do not need to number the elements you add. If you remove the last one you can simply use:

$('#yourItemContainer').last().remove();

Then you say the + and - buttons can't be used on separate occassions. I assume the whole element is cloned in your code and I cannot see how the + and - elements are created but if they have an ID they might not be unique anymore and therefore they might not do what you expect them to do. So make sure the ID's are unique or even better, do not use ID's in the case but give them a classname which does not have to be unique and when removing remove like:

yourRemoveElement.parent().parent().parent().parent().remove(); // assuming the remove button is in a td which is in a tr which is in a tbody which is in a table.

Hope this helps you a few steps further. If not, please send more details here.