JSFiddle - React, Tailwind, and code Playground

by itsazzad

HTML

<div id='TextBoxesGroup'>
  <div id="TextBoxDiv1">
    <label>Textbox #1 : </label>
    <input type='textbox' id='textbox1'>
    <input type='button' value='Remove Button' class='removeButton'>
  </div>
</div>
<input type='button' value='Add Button' id='addButton'>

JavaScript

$(document).ready(function() {
    var counter = 2;
    $("#addButton").click(function() {
      if (counter < 2) {
        alert("Add more textbox");
        return false;
      }

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

      newTextBoxDiv.after().html('<label>Textbox #' + counter + ' : </label>' +
        '<input type="text" name="textbox' + counter +
        '" id="textbox' + counter + '" value="" >' +
        '<input type="button" name="button' + counter +
        '" class="removeButton" value="Remove Button">');
      newTextBoxDiv.appendTo("#TextBoxesGroup");

      counter++;
    });

    $("body").on("click", ".removeButton", function() {
      if (counter <= 2) {
        alert("No more textbox to remove");
        return false;
      }

      $(this).closest('.TextBoxDiv').remove();
    });
  });