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_ '+ counter +'")}} возвращает

<input id="id_total' + counter + '" name="total" value="" type="text">, когда я проверяю с помощью элемента inspect.

Вместо <input id="id_total_1" name="total" value="" type="text"> получения этого вывода.

Я пытаюсь достичь динамической формы.#btnAdd добавит поле.Каждый раз, когда форма добавляется, она должна получить id="id_total_1", id="id_total_2" и т. Д.