Question

I have a problem adding an input with similar class(addinput_units).

In the example when you click on the “add” link next to “field 1”, it adds a new input following “field 2” with value “field 1”.

How can I add a new field following the input nearest to the “add” link with a similar class(addinput_units) in HTML?

EXAMPLE: http://jsfiddle.net/FpsPh/

$(function () {
    $('a.add_input').live('click', function (event) {
        event.preventDefault();
        var $class = '.' + $(this).closest('div.find_input').find('div').attr('class').split(" ")[0];
        var newDiv = $($(this).closest($class).get(0)).clone(false);
        $(this).closest($class).find('.add_input:first').remove()
        newDiv.hide().fadeIn('slow');
        $($class + ':last').after(newDiv);
    });
});

EDITE:

this is the original my code that not work true. see you: http://jsfiddle.net/FpsPh/4/

Answer 1

I’m not 100% sure I understood the question, but is this what you’re going for?

$(function () {
    $('a.add_input').live('click', function (event) {
        event.preventDefault();
        var $this = $(this),
            $div = $this.closest('div'),
            $clone = $div.clone().hide()
                .insertAfter($div).fadeIn('slow');
        $this.remove();
    });
});

Here’s the updated jsFiddle.