插入新行后，如何在jquery上循环javascript函数？

在用户输入num1并选择num2之后，我试图显示每一行的计算结果 当前结果只能在第一行中显示，但我希望在添加新行后显示

请求决议

谢谢

以下是我的表格行代码：

<form id="insert_form" method="post" action="">
<table class="table table-bordered" id="table_field">
<tr>
<th>Num 1</th>
<th>Num 2</th>
<th>Rate</th>
<th>Amount</th>
<th>Add or Remove</th></tr>
<tr><td><input class="form-control"  name="num1[]" type="number" id="num1" ></td>
<td><select class="form-control" name="num2[]" type="text" id="num2" onchange="calc()">
    <option value="a" id="a">day a</option>
    <option value="b" id="b">day b</option>
     <option value="c" id="c">day c</option></select></td>
<td><input  name="rate[]" type="number" id="rate" ></td>
<td><input  name="amount[]" type="number" id="amount" ></td>
<td><input type="button" name="add" id="add" value="add"></td></tr>
</table>                
<input" type="submit" name="save" id="save" value="Save Data">

数字1
数字2
比率
数量
添加或删除
一天
第二天
c天
不能对多个元素使用相同的
id
。而是使用输入的
name
属性，无论何时调用函数，都要传递
this
及其内部。此处，
此
参考发生更改事件的当前选择框，然后使用该框获取所有输入值，并将新值添加到您的费率和金额输入中

演示代码：


$（文档）.ready（函数（）{
var repeat='每天B天c'；
$（“#添加”）。单击（函数（）{
$（“#表_字段”）。追加（重复）；
});
$（“#表#字段”）。在（'单击'，'删除'，函数（）上{
$（this）.closest（'tr'）.remove（）；
});
});
函数计算（el）{
//获取num1字段值
var aa=parseFloat（$（el）.closest（'tr'）.find（'[name*=num1]'）.val（））；
风险价值金额；
var率；
//比较
如果（el.value==“a”）{
比率=10；
金额=费率*aa；
}否则，如果（el.value==“b”）{
比率=20；
金额=费率*aa；
}否则，如果（el.value==“c”）{
比率=30；
金额=费率*aa；
}
//找到比率和数量，并在那里增值
$（el）.最近（'tr'）.find（'[name*=rate]'）.val（rate）；
$（el）.最近（'tr'）.find（'[name*=amount]'）.val（amount）；
}

数字1
数字2
比率
数量
添加或删除
一天
第二天
c天
<script>        
        $(document).ready(function()
        {
            var repeat =    '<tr><td><input class="form-control"  name="num1[]" type="number" id="num1" ></td><td><select class="form-control" name="num2[]" type="text" id="num2" onchange="calc()"><option value="a" id="a">day a</option><option value="b" id="b">day b</option><option value="c" id="c">day c</option></select></td><td><input class="form-control"  name="rate[]" type="text" id="rate" ></td><td><input class="form-control"  name="amount[]" type="amount" id="amount" ></td><td><input class="btn btn-danger" type="button" name="remove" id="remove" value="remove"></td></tr>';       

            $("#add").click(function()
            {
                $("#table_field").append(repeat);   
            });

            $("#table_field").on('click', '#remove',function()
            {
                $(this).closest('tr').remove(); 
            });         
        }); 
    </script>
            

<script>
function calc() {
    var aa = parseFloat(document.querySelector("#num1").value);
    var bb = document.querySelector("#num2").value; 
    var amount;
    var rate;
    if (bb == "a") { 
        rate = 10; amount = rate * aa;
    } else if (bb == "b") { 
        rate = 20; amount = rate * aa;
    } else if (bb == "c") { 
rate = 30; amount = rate * aa;
    }
    document.getElementById("rate").value = rate;
    document.getElementById("amount").value = amount;
}
 </script>