JSFiddle - React, Tailwind, and code Playground

HTML

<form name="EditRoster" method="post" action="DoRoster.php">
    <table id="RosterTbl" cellspacing="0" cellpadding="2">
        <tr style="text-align:left;vertical-align:top;">
            <td><b>Name</b>:</td>
            <td>
                <input type="text" name="Attendee" value="" size="25" onclick="alert(this.name)">
            </td>
            <td><b>Paid</b>:</td>
            <td>&nbsp;
                <input type="checkbox" name="Paid" value="Yes" size="25">&nbsp;
            </td>
        </tr>
        <tr style="text-align:left;vertical-align:top;">
            <td><b>Email</b>:</td>
            <td>
                <input type="text" name="Email" value="" size="25">
            </td>
            <td><b>Paid When</b>:</td>
            <td>&nbsp;
                <input type="text" name="PaidWhen" value="" size="10">&nbsp;
            </td>
        </tr>
    </table>
    <div style="padding:5px;">
        <input type="hidden" name="NumStudents" value="0">
        <input type="button" name="AddPersonButton" value="Add Person" onclick="CloneElement('RosterTbl','NumStudents');">
    </div>
</form>

JavaScript

var TheForm = document.forms.EditRoster;

function CloneElement(ElToCloneId, CounterEl) {
    var CloneCount = TheForm[CounterEl].value;
    CloneCount++;
    TheForm[CounterEl].value = CloneCount;

    var ElToClone = document.getElementById(ElToCloneId);

    var NewEl = ElToClone.cloneNode(true);
    NewEl.id = ElToCloneId + CloneCount;
    NewEl.style.display = "block";

    var NewField = NewEl.children;
    for (var i = 0; i < NewField.length; i++) {
        var InputName = NewField[i].name;
        if (InputName) {
            NewField[i].name = InputName + CloneCount;
        }

        var insertHere = document.getElementById(ElToCloneId);
        insertHere.parentNode.insertBefore(NewEl, insertHere);
    }
}