Javascript 在模板表中添加具有特定行id的行

这是我的模板的一部分：

<form method="POST">
            {{ form.hidden_tag() }}
            <table id="myTable">
                <tr class="heading">
                    <td>
                        Item
                    </td>

                    <td>
                        Price
                    </td>
                </tr>
                <div id="itemstable">
                    {% if items|length > 0 %}
                        {% for item in items %}
                            <tr class="item">
                                <td>
                                    <input id="item-{{ item.id }}" name="description-{{ item.id }}" required="" type="text" value="{{ item.description }}" >
                                </td>
                                <td>
                                    <input  id="item-{{ item.id }}" name="amount-{{ item.id }}" required="" type="number" min="0"  value="{{ item.amount }}" onchange="sumamount();">
                                </td>
                            </tr>
                        {% endfor %}
                    {% else %}
                        <tr class="item">
                            <div>
                            <td>
                                <input id="item-{{ items|length }}" name="description-{{ items|length }}" required="" type="text" value="{{form.description}}">
                            </td>
                            <td>
                                <input id="item-{{ items|length }}" name="amount-{{ items|length }}" required="" type="text" value="{{form.amount}}" onchange="sumamount();">
                            </td>
                                </div>
                        </tr>
                    {% endif %}
                </div>
            </table>
            <table>
                <tr class="total">
                    <div>
                    <td>
                        Total:
                    </td>
                    <td>
                       <input id="total" type="text" value="0"readonly>
                    </td>
                        </div>
                </tr>
            </table>

            <button id="add" onclick="addLineItem(event)">Add Item</button>
            <div>
</form>
    <script>

// function to add a row in table
    let currMax = {{ items|length }} + 1;
    function addLineItem(e){
        var lineItem = "<tr class='item'> <td> <input id='item-"+currMax+"' name='description-"+currMax+"' required='' type='text' value=''></td> <td> <input id='item-"+currMax+"' name='amount-"+currMax+"' required='' type='text' value=''></td> </tr>";
        currMax++;
        document.getElementById('myTable').innerHTML += lineItem;
        e.preventDefault();
        console.log("Still on page!");
    }
    function sumamount(){
        sum=0;
        $("input[name^='amount-']").each(function(){
            sum+=Number($(this).val());
        });
        $("#total").val(sum);
    }
</script>

{{form.hidden_tag（）}}
项目
价格
{如果项目|长度>0%}
{items%%中的项的%s}
{%endfor%}
{%else%}
{%endif%}
总数：
添加项
//函数在表中添加行
设currMax={{items | length}}+1；
函数addLineItem（e）{
var lineItem=“”；
currMax++；
document.getElementById（'myTable'）。innerHTML+=lineItem；
e、 预防默认值（）；
log（“仍在页面上！”）；
}
函数summantium（）{
总和=0；
$（“输入[name^='amount-']）。每个（函数（）{
sum+=数字（$（this.val（））；
});
美元（“#总计”）.val（总和）；
}

我创建了一个添加行的按钮（函数addLineItem（e））。 但当我提交表格时。在请求中，添加的这一行不在请求中，我的第二个问题是，在我的js函数sumamount（）中没有考虑这一新行（除非我在amount字段中填充一些内容，否则该值一直为0）

---

感谢您帮助解决此问题。

我找到了一种方法。只需在我的“添加”按钮之前向上移动我的按钮，令人惊讶的是，它就可以工作了