javascript - JavaScript グローバル変数が 1 回しか更新されないのはなぜですか? jQueryの最後の子セレクタエラー?

Question

私は jQuery を学び、JS Fiddle でアイデアをテストしようとしていますが、脳がフリーズしているようです。

以下のコードは、新しい行を追加するために末尾に「+」があるテーブルの行を表示する必要があります。初めてクリックすると、新しい ID が新しい行に適切に割り当てられます (新しい行で値が未使用の状態にリセットされ、古い行の "+" が "-" に変更されます)。コードを最初に実行した後、 oldID と newID の値が増加し続けない理由がわかりません。

古い最後の子の数値部分として「32」を読み取り、「33」をテーブルに追加して新しい行を作成しますが、その後、最後の子セレクターを使用して id を再計算しても、実際に NEW を選択するようには見えません最後の子。

コードをより良くする方法についての提案は大歓迎ですが、現在のコードに欠けているものを具体的に知りたいと思っています。

ありがとう！

<table>

<tbody id="investigators">
<tr id="investigator.32">

  <td>
    <input name="person.32" id="person.32"
           type="text" value=""
           placeholder="Lastname, Firstname" 
           onfocus="this.select();" />
  </td>

  <td style="text-align:center" id="add_more.32">
    <img src="add_green.svg"
         alt="[+]" title="Add investigator"
         style="height:1em; width:1em;" />
  </td>

</tr>
</tbody>

および Javascript / jQuery コード:

var oldID = parseInt($("#investigators :last-child")
                       .attr("id").split(".")[1]);
var newID = oldID+1;
$("#add_more\\."+oldID).click(function(){
  var $newPI = $("#investigator\\."+oldID).clone(true);
  $newPI.find("#person\\."+oldID)
    .val(null)
    .attr("placeholder","Jungle, George of")
    .attr("name","person."+newID)
    .attr("id",  "person."+newID);
  $newPI.find("#add_more\\."+oldID)
    .attr("id","add_more."+newID);
  $newPI
    .attr("id","investigator."+newID);
  $newPI.appendTo("#investigators");
  $("#add_more\\."+oldID+" :first-child")
    .attr("src","delete_red.svg")
    .attr("alt","[X]")
    .attr("title","Remove investigator");
  oldID = parseInt($("#investigators :last-child")
                       .attr("id").split(".")[1]);
  newID = oldID+1;
});