Add/Remove, Rename, and Reorder Inputs

Prototype for Infantino form

by TheFiddler

HTML

<div class="ch">
        <a href="#" class="adding">Add</a>
</div>
<p class="ffdd"></p>

CSS

.remove_row {
    font-weight: bold;
    font-size: 10px;
}

JavaScript

function removeidx(context, clss, type) {
    var remove = $(context).closest(clss);
    remove.fadeOut('slow', function () {
        $(this).remove();
        var idx = 0;
        $(clss).each(function () {
            var checkBoxes = $('input[type="' + type + '"]', this);
            checkBoxes.each(function () {
                var name = $(this).attr('name');
                name = name.replace(/\d+/, idx);
                $(this).attr('name', name);
                idx = idx + 1;
            });
        });
    });
}

$(document).on('click change', 'a.adding', function (e) {
    e.preventDefault();
    var idx = $('.Row').length;
    $('.ffdd').append('<div class="Row"> <input name="arr[' + idx + '][]" type="text" value=""> <a href="#" class="remove_row" title="remove this row">Remove</a></div>');
});

$('.ffdd').on('click', 'a', function (e) {
    removeidx(this, '.Row', 'text');
})