JSFiddle - React, Tailwind, and code Playground

by Akram kamal

HTML

<form method="post" action="" id="form-step2" class="form-vertical">
    <fieldset>
        <legend>Inputs</legend>
        <div id="extender">
            <p style="display: block;">
                <input type="text" value="1" id="1" name="items[]" class="dynamic-input"
                /> <a href="#step2">Remove</a>

                <input type="text" value="1" id="1" name="items[]"
                class="dynamic-input" /> <a href="#step2">Remove</a>

            </p>
        </div>
        <p><a id="add" href="#">Add</a>

        </p>
    </fieldset>
</form>

JavaScript

$(function () {

    //set a counter
    var i = $('.dynamic-input#form-step2').length + 1;
    alert(i);
    //add input
    $('a#add').click(function () {
        $('<p><input type="text" class="dynamic-input" name="items[]" id="' + i + '" value="' + i + '" />' +
            '<a href="#step2">Remove</a></p>').fadeIn("slow").appendTo('#extender');
        i++;

        $("a:contains('Remove')").click(function () {
          $(this).parent().css("display","none");
        });

        return false;
    });


    $("a:contains('Remove')").click(function () {
        alert('hi');
    });

    //fadeout selected item and remove
    $("#form-step2.dynamic-input").on('click', 'a', function () {
        $(this).parent().fadeOut(300, function () {
            $(this).empty();
            return false;
        });
    });

});