Question

Hi everyone i found a code in the web and i do some edits but i can’t get how to get it works many time on the same page
Here you can find my jsfiddle: http://jsfiddle.net/Scanu/DhpXN/

if i repeat the html code twice (of corse) it doesn’t work what can i do to improve the code!? :/
Thanks in advance and sorry for my english i’m italian

HTML

<div>
        <input type="button" id="btnAdd" value="add another name" />
        <input type="button" id="btnDel" value="remove name" />
    </div> 
<div class="clonedInput">
        Link: <input type="text" name="link1" />

    </div>
<br><br><br><br>​

SCRIPT

$('#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
    var newElem = $('.clonedInput:last').clone();

    newElem.children(':first').attr('name', 'link' + newNum);
    $('.clonedInput:last').after(newElem);
    $('#btnDel').attr('disabled', false);
    if (newNum == 5) $('#btnAdd').attr('disabled', 'disabled');
});

$('#btnDel').click(function() {
    var num = $('.clonedInput').after().length;
    $('.clonedInput:last').remove(); // remove the last element
    $('#btnAdd').attr('disabled', false); // enable the "add" button
    // if only one element remains, disable the "remove" button
    if (num - 1 == 1) $('#btnDel').attr('disabled', 'disabled');
});

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

Answer 1

Hope this is what you want to see
http://jsfiddle.net/tonybo/DhpXN/19/

HTML

<table cellpadding="5" border="0">
    <tr>
        <td>
            <div class="clonedInput">
                Link: <input type="text" name="link_1" class="input"/>
            </div>
        </td>
        <td valign="bottom">
            <button id="Add"> + </button>
            <button id="Del"> - </button>
        </td>
    </tr>
    <tr>
        <td>
            <div class="clonedInput">
                Name: <input type="text" name="name_1" class="input"/>
            </div>
        </td>
        <td valign="bottom">
            <button id="Add"> + </button>
            <button id="Del"> - </button>
        </td>
    </tr>
</table>​

and JavaScript (this is wrapped in onLoad function)

var MAX_ELEMENTS = 5;
$('.clonedInput').each(function (index, element) {
    var $this = $(this);
    var $thisParent = $this.parent();
    var $input = $this.find("input");
    var groupName = $input.attr('name').split('_')[0];

    var $addButton = $thisParent.parent().find("#Add");
    var $delButton = $thisParent.parent().find("#Del");

    $addButton.click(function (e) {
        var newElementIndex = $thisParent.find(".clonedInput").length;
        var $newElement = $thisParent.find(".clonedInput:last").clone();
        $newElement.find('input').attr( 'name', groupName + "_" + newElementIndex);
        $newElement.hide();
        $thisParent.find(".clonedInput:last").after($newElement);
        $newElement.animate({ height: 'toggle', opacity: 'toggle' }, "medium");
        $delButton.fadeIn();
        if ( newElementIndex >= (MAX_ELEMENTS - 1)  )
            $addButton.fadeOut();
    });

    $delButton.click(function (e) {
        var newElementIndex = $thisParent.find(".clonedInput").length;
        $thisParent.find(".clonedInput:last").animate({
            height: 'toggle',
            opacity: 'toggle'
        }, {
            duration : "medium",
            complete : function() {
                $(this).remove();
            }
        });

        if (newElementIndex <= MAX_ELEMENTS )
            $addButton.fadeIn();

        if ( newElementIndex == 1 )
            $delButton.fadeOut();
    });
});​