JSFiddle - React, Tailwind, and code Playground

HTML

<form id="personas" name="personas" method="post" action="">
  <table id="mytable" width="300" border="1" cellspacing="0" cellpadding="2">
  <tbody>
    <tr>
      <td>Name</td><td>Phone</td>
    </tr>
    <tr class="person">
      <td><input type="text" name="name[]" id="name" /></td><td><input type="text" name="phone[]" id="phone" maxlength="10"/></td>
        <td><input type="button" class="deleteRow" value="Delete"/></td>
    </tr>
    </tbody>
  </table>
  <button id="add">+ Add New</button>
  <input type="submit" value="Submit" name="action">
</form>

JavaScript

$(document).ready(function() {
    $("#add").click(function() {
        var $lastRow = $('#mytable tbody>tr:last');
        if ($lastRow.index() < 10) { // set maximum rows here
            $lastRow.clone(true).insertAfter($lastRow).find('input[type="text"]').val("");
        }
        return false;
    });
});

$('input[name="phone\[\]"]').keyup(function() {
    if (this===$('input[name="phone\[\]"]').last()[0] && this.value.length===+$(this).attr("maxlength")) {
        $("#add").click();
    }
});

$("#mytable").on("click","input.deleteRow", function(){
    if ($("#mytable tr").length > 2)
        $(this).closest("tr").remove();
});