javascript - ボタンをクリックするたびに既存のテーブルに行を挿入する方法

Question

次のコードがあります。

<table id="t1"> 
<tr>
    <td>Text A</td>
    <td>Text B</td>
</tr>
<% int count1 = -1;
    for(int i=0; i<3; i++) { %>
<tr>
    <td><input type="text" id="amount<%=i%>"></td>
    <td><input type="text" id="convertedAmount<%=i%>" readonly></td>
</tr>
<%count1 =i;
}%>
<tr>
    <td><input type="button" onclick="addRow(<%=count1%>)" value="Add Row"></td>
</tr>
</table>

Javascript:

function appendRow(val){
   var tbody = document.getElementById("t1").getElementsByTagName("tbody")[0];
   var row = document.createElement("TR");
   var textA= document.createElement("TD");
   textA.innerHTML = '<input type="text" id="amount'+val+'">';
   var textB= document.createElement("TD");
   textB.innerHTML = '<input type="text" id="convertedAmount'+val+'" readonly>';
     row.appendChild(textA);
     row.appendChild(textB);
     tbody.appendChild(row);
   }

編集済み---
OK、Barmar のおかげでこの部分まで完了しました。問題は、どうすれば val の値を増やすことができるかということです (既存のデータから継続します)。

この Javascript を使用すると、テキストを含む行が追加されるだけです。では、このテーブルにそれぞれのテキスト ボックスとドロップダウン リストを使用して行を追加するにはどうすればよいでしょうか。Javascriptだけでできますか、それともサーブレットでも動作する必要がありますか?