JSFiddle - React, Tailwind, and code Playground

by notarazi

HTML

<html>
<head>
<title>jQuery add / remove textbox example</title>
 <script type="text/javascript" src=" https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<div id='TextBoxesGroup'>
 <div id="TextBoxDiv1">
 <label>Textbox #1 : </label><input type='text' id='textbox1' name='textbox1' />
 </div>
</div>
<input type='button' value='Add Button' id='addButton' />
<input type='button' value='Remove Button' id='removeButton' />
<input type='button' value='Get TextBox Value' id='getButtonValue' />
 
</body>
</html>

CSS

div{
 padding:8px;
 }

JavaScript

$(document).ready(function () {
 	var counter = 2;
	$("#addButton").click(function () {
            if (counter > 10) {
                alert("Only 10 textboxes allowed");
                return false;
            }
            $('<div/>',{'id':'TextBoxDiv' + counter}).html(
              $('<label/>').html( 'Textbox #' + counter + ' : ' )
            )
            .append( $('<input type="text">').attr({'id':'textbox' + counter,'name':'textbox' + counter}) )
            .appendTo( '#TextBoxesGroup' )       
            counter++;
        });

        $("#removeButton").click(function () {
            if (counter == 1) {
                alert("No more textbox to remove");
                return false;
            }
            counter--;
            $("#TextBoxDiv" + counter).remove();
        });
        $("#getButtonValue").click(function () {
         var msg = '';
            for (i = 1; i < counter; i++) {
                msg += "\n Textbox #" + i + " : " + $('#textbox' + i).val();
            }
            alert(msg);
        });
});