Jinja2-动态添加表单输入字段

Question

这是我的Jinja模板：我正在使用烧瓶。

form.html

<table class="table table-responsive table-striped table-bordered">
    <thead>
        <tr>
            <td>Total Cost</td>
            <td>Add</td>
        </tr>
    </thead>
    <tbody id="TextBoxContainer">
        <tr class="type">
            <td>{{ form.total(id="id_total_0") }}</td>
            <td><button type="button" class="btn btn-danger remove"><i class="glyphicon glyphicon-remove-sign"></i>
                </button>
            </td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th colspan="2">
                 <button id="btnAdd" type="button" class="btn btn-primary" data-toggle="tooltip" data-original-title="Add more controls"><i class="glyphicon glyphicon-plus-sign"></i></button>
            </th>
        </tr>
    </tfoot>
</table>

page.js

$(document).ready(function () {
    var counter = $(".type").length;
    $("#btnAdd").bind("click", function () {
        var div = $("<tr />");
        div.html(GetDynamicTextBox(counter));
        $("#TextBoxContainer").append(div);
        counter = counter + 1;
    });
    $("body").on("click", ".remove", function () {
        $(this).closest("tr").remove();
    });
    });
    function GetDynamicTextBox(counter) {
        return '<td>{{ form.total(id="id_total_' + counter + '")}}</td>' + '<td><button type="button" class="btn btn-danger remove"><i class="glyphicon glyphicon-remove-sign"></i></button></td>'
    }

此 {{form.total（id =“ id_total_'+计数器+'”）}} 返回

<input id="id_total' + counter + '" name="total" value="" type="text">，当我使用检查元素进行检查时。

而不是<input id="id_total_1" name="total" value="" type="text">获得此输出。

我试图实现的是动态形式。 #btnAdd将添加该字段。每次添加表单时，其格式应为id="id_total_1"，id="id_total_2"，依此类推。