JSFiddle - React, Tailwind, and code Playground

by zerolfc

HTML

<div id="holder">
    <div id="TextBoxDiv"><label>Attandee #1</label><input type='textbox' id='textbox1' ><a href="#" class="add">Add</a></div>
</div>
<input type="submit" id="book_event" value="Book Event">

JavaScript

$(document).ready(function() {

    var counter = 2;

    $(".add").live("click", function() {

        if (counter > 5) {
            alert("Only 5 textboxes allow");
            return false;
        }

        var newTextBoxDiv = $(document.createElement('div')).attr("id", 'TextBoxDiv' + counter);

        newTextBoxDiv.html('<label>Attandee #' + counter + '</label><input type="text" id="textbox' + counter + '"><a href="#" value="add" class="add">Add</a>&nbsp;<a href="#" value="remove" class="remove">Remove</a>');

        newTextBoxDiv.appendTo("#holder");


        counter++;
    });

    $(".remove").live("click", function() {
        if (counter == 1) {
            alert("No more textbox to remove");
            return false;
        }

        counter--;

        $("#TextBoxDiv" + counter).remove();

    });

    $("#book_event").submit(function(e) {
        $(this).find('input[id^=textbox]').each(function(i, e) {
            $.post("Scripts/book_event.php", {
                att_name: $(e).val()
            }, function(data) {
                if (data.success) {
                    $("#err").text(data.message).addClass("ok").fadeIn("slow");
                } else {
                    $("#err").text(data.message).addClass("error").fadeIn("slow");
                }
            }, "json");
        });
        e.preventDefault();
    });

});