JSFiddle - React, Tailwind, and code Playground

by SullysRants

HTML

<h2>Visitor Information </h2>

<div class="input_fields_wrap">

    <table width="100%" border="0" cellspacing="2">
        <tr>
            <td class="labels">Title:</td>
            <td align="left"><span id="sprytextfield11">
        <input name="Visitor_Title[]" type="text" id="Visitor_Title[]" placeholder="Title" size="50">
        <span class="textfieldRequiredMsg">Title is Required</span></span>
            </td>
        </tr>
        <tr>
            <td width="150" class="labels">Name:</td>
            <td align="left"><span id="sprytextfield12">
        <input name="Visitor_Name[]" type="text" id="Visitor_Name[]" size="50" placeholder="Last Name, First Name" />
        <span class="textfieldRequiredMsg">Name is Required</span></span>
            </td>
        </tr>
        <tr>
            <td width="150" class="labels">Company / Organization:</td>
            <td align="left"><span id="sprytextfield13">
        <input name="Visitor_Organization[]" type="text" id="Visitor_Organization[]" size="50" placeholder="Company / Organization"/>
        <span class="textfieldRequiredMsg">Organization is Required</span></span>
            </td>
        </tr>
        <tr>
            <td class="labels">U.S. Citizen:</td>
            <td align="left"><span id="spryselect2">
        <select name="Visitor_Citizenship[]" id="Visitor_Citizenship[]">
          <option>Select</option>
          <option value="Yes">Yes</option>
          <option value="No">No</option>
        </select>
        <span class="selectRequiredMsg">Citizenship Required</span></span>
            </td>
        </tr>
        <tr>
            <td class="labels">&nbsp;</td>
            <td align="left">&nbsp;</td>
        </tr>
        <tr>
            <td class="labels">&nbsp;</td>
            <td align="left"><button class="add_field_button">Additional Visitors</button>
            </td>
        </tr>
    </table>
</div>

JavaScript

$(document).ready(function () {
    var max_fields = 5; //maximum input boxes allowed
    var wrapper = $(".input_fields_wrap"); //Fields wrapper
    var add_button = $(".add_field_button"); //Add button ID

    var x = 1; //initlal text box count
    $(add_button).click(function (e) { //on add input button click
        e.preventDefault();
        if (x < max_fields) { //max input box allowed
            x++; //text box increment
            $(wrapper).append('<div><table width="100%" border="0" cellspacing="2"><tr><td class="labels">Title:</td><td align="left"><input name="Visitor_Title[]" type="text" id="Visitor_Title[]" placeholder="Title" size="50"></td></tr><tr><td width="150" class="labels">Name:</td><td align="left"><input name="Visitor_Name[]" type="text" id="Visitor_Name[]" size="50" placeholder="Last Name, First Name" /></td></tr><tr><td width="150" class="labels">Company / Organization:</td><td align="left"><input name="Visitor_Organization[]" type="text" id="Visitor_Organization[]" size="50" placeholder="Company / Organization"/></td></tr><tr><td class="labels">U.S. Citizen:</td><td align="left"><select name="Visitor_Citizenship[]" id="Visitor_Citizenship[]"><option>Select</option><option value="Yes">Yes</option><option value="No">No</option></select></td></tr></table><br /><a href="#" class="remove_field">Remove</a></div>'); //add input box
        }
    });

    $(wrapper).on("click", ".remove_field", function (e) { //user click on remove text
        e.preventDefault();
        $(this).parent('div').remove();
        x--;
    })
});