JSFiddle - React, Tailwind, and code Playground

by zerolfc

HTML

<div id='holder'>
    <div id="TextBoxDiv1"><label>Attandee #1</label><input type="text" id="textbox1" value="" ><a href="#" class="add">Add</a>&nbsp;<a href="#" class="remove">Remove</a></div>
</div>
<input type="button" value="get" id="get">

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="#" class="add">Add</a>&nbsp;<a href="#" 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();

    });

    $("#get").click(function() {

        var msg = '';
        for (i = 1; i < counter; i++) {
            msg += "\n Attandee #" + i + " : " + $('#textbox' + i).val();
        }
        alert(msg);
    });
});