JSFiddle - React, Tailwind, and code Playground

HTML

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/additional-methods.min.js"></script>
<form method="post">
    <button type="button" id="AddLine">Add Line</button>
    <table border="1px" id="table">
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Phone</th>
            <th>Email</th>
            <th>Ethnicity</th>
        </tr>
        <tr>
            <td><input type=text name="fname_new[0]" class="table_input"/></td>
            <td><input type=text name="lname_new[0]" class="table_input"/></td>
            <td><input type=text name="phone_new[0]" class="table_input_phone"/></td>
            <td><input type=text name="email_new[0]" class="table_input_email"/></td>
            <td><input type=text name="ethnicity_new[0]" class="table_input"/></td>
            <td><button type="button">delete</button></td>
        </tr>
    </table>
    <input type="submit" name="submit" value="Submit" id="submit"/>
</form>

JavaScript

$(document).ready(function(e) {
    var num_rows=-1;
    $("#table").on("click", "button", function() {
       $(this).closest("tr").remove(); 
       num_rows--;
    });
    
    $("#AddLine").click(function () {
        if(num_rows<20) {
            var row = "<tr><td><input name=fname_new["+num_rows+"] type=text class='table_input'/></td><td><input name=lname_new["+num_rows+"] type=text  class='table_input'/></td><td><input name=phone_new["+num_rows+"] type=text  class='table_input_phone'/></td><td><input name='email_new["+num_rows+"]' type=text class='table_input_email'/></td><td><input name=ethnicity_new["+num_rows+"] type=text  class='table_input'/></td><td><button type=button>delete</button></td></tr>";
            $("#table").append(row);
            num_rows++;
        } else
            alert("Cannot register more than 20 other people");
    });
    
    jQuery.validator.addClassRules({
        table_input:{
            lettersonly: true,
               required: true,
        },
        table_input_email: {
            required: true,
            email: true,
        },
        table_input_phone: {
            required: true,
            phoneUS: true,
        },
    });
    jQuery.validator.addMethod("lettersonly", function(value, element) { 
        return this.optional(element) || /^[a-z\s]*$/i.test(value);
    }, jQuery.format("Please enter only letters")); 
   
    
    $('form').validate();