Cacher is the code snippet organizer for pro developers

<input id="btnAdd1" type="button" value="行追加" />
<table id="tblForm1">
<thead>
<tr>
<th>名前</th>
<th>メールアドレス</th>
<th>期限</th>
</tr>
</thead>
<tbody>
<tr>
<td><input style="width: 150px;" name="name[]" type="text" /></td>
<td><input style="width: 150px;" name="email[]" type="text" /></td>
<td><input style="width: 150px;" name="date[]" type="text" /></td>
</tr>
<tr>
<td><input style="width: 150px;" name="name[]" type="text" /></td>
<td><input style="width: 150px;" name="email[]" type="text" /></td>
<td><input style="width: 150px;" name="date[]" type="text" /></td>
</tr>
</tbody>
</table>

//最終行に追加する
jQuery(function($) {
 $("#btnAdd1").on("click", function() {
  // テーブルの最終行をクローンしてテーブルの最後に追加する
  $("#tblForm1 tbody tr:last-child").clone(true).appendTo("#tblForm1 tbody");
 
  // 追加した行の値をクリアする
  $("#tblForm1 tbody tr:last-child input").val("");
 });
});
</script>

<input id="btnAdd3" type="button" value="行追加" />
<table id="tblForm3">
<thead>
<tr>
<th>名前</th>
<th>メールアドレス</th>
<th>期限</th>
<th></th>
</tr>
</thead>
<tbody>
<tr style="display: none;">
<td><input style="width: 150px;" name="name[]" type="text" /></td>
<td><input style="width: 150px;" name="email[]" type="text" /></td>
<td><input style="width: 150px;" name="date[]" type="text" /></td>
<td><input class="btnDelete" type="button" value="削除" /></td>
</tr>
</tbody>
</table>

// 行を削除する
<script>
jQuery(function($) {
 $("#btnAdd2").on("click", function() {
  // 最終行ではなく、非表示になっている最初の行なので first-child になっている
  $("#tblForm2 tbody tr:first-child").clone(true).appendTo("#tblForm2 tbody");

  // 複製後に表示させる
  $("#tblForm2 tbody tr:last-child").css("display", "table-row");

 // 行削除
 $(".btnDelete").on("click", function() {
  $(this).parent().parent().remove();
 });
 });
});
</script>

参考URL１
https://xn--p8jc0b9i5a41eb.website/jquery%E3%81%AB%E3%82%88%E3%82%8B%E3%83%95%E3%82%A9%E3%83%BC%E3%83%A0%E3%83%86%E3%83%BC%E3%83%96%E3%83%AB%E8%A1%8C%E3%81%AE%E8%BF%BD%E5%8A%A0%E3%83%BB%E5%89%8A%E9%99%A4.html

参考URL２
http://study-upup.blogspot.com/2014/05/jqueryjquery_14.html

//追加した行番号に番号をふる
<script>
    jQuery(function ($) {
        $("#btnAdd").on("click", function () {
            // テーブルの最終行をクローンしてテーブルの最後に追加する
            $("#addTable tbody tr:last-child").clone(true).appendTo("#addTable tbody");

            // 追加した行の値をクリアする
            $("#addTable tbody tr:last-child input").val("");
            
            // ------------------ この部分 --------------------- 
            //Noの最大値を取得
            //jqueryのセレクターを使って、
            //「id=sample_table」の子供の「tbody」の子供の「最後に出てくるtr」の「最初に出てくるtd」のHTMLを変数に代入しています。
            const max_no = $('#addTable > tbody > tr:last td:first').html();
            //次のNoを生成
            const next_no = parseInt(max_no) + 1;
            //追加した行のNoに値を入れる。
            $('#addTable > tbody > tr:last td:first').html(next_no);
            // ------------------ この部分 --------------------- 
        });
    });
</script>