javascript - テキスト入力を同じ html ページの別の div にバインドする方法

Question

ユーザー入力を受け取り、それを別の入力フィールドにタグのリストとしてバインドするタグ リストを作成しました。しかし、Javascript と JQuery を何週間もいじった後、私ができる唯一の方法 (そして重要なことにエレガントな方法) は、Brython を使用することです。残念ながら、それは何らかの方法で jinja2 テンプレートを無効にしているように見えるため、データベースには何も送信されません。結局のところ、私の質問は、このような一見単​​純なタスクを Flask でネイティブに実行できるかということです。

Brython スクリプトがどのように機能するかの本質は次のとおりですhttps://jsfiddle.net/5nt39deo/2/が、問題のコードは以下のとおりです。

<form action="" id="homeForm" class="centered" role="form" method="post">
    {{ form1.hidden_tag() }}
    {{ form1.toppings(type="text",id="homeInput",autocomplete="off",list="topps",placeholder="Toppings...") }}
    <datalist id="topps">{% for top in topps %}<option value="{{ sym }}">{% endfor %}</datalist>
    <button action="" type="submit" id="homeAddTags" class="button">Add</button><br><br>
    {{ form1.tags(id="tagList") }}<br>
    {{ form1.agree(id="homeAgreement") }}
    {{ form1.agree.label() }}<br><br>
    <button type="reset" id="homeResetTags" class="button">Reset</button>
    {{ form1.sendtags(type="submit",class_="button",id="homeSubmit") }}<br><br>
</form>


<script type="text/python" id="script1">
    from browser import document, html, window, console, alert

    storage = []

    def addTag(e):
        item = document['homeInput'].value
        if item not in storage and item != '':
            storage.append(item)
            document['homeInput'].value = ''
            document['tagList'].textContent = storage
        else:
            alert('Tag already added.')
            document['homeInput'].value = ''

    def resetTags(e):
        storage = []
        document['homeInput'].value = ''
        document['tagList'].textContent = storage

    document['homeAddTags'].bind('click', addTag)
    document['homeResetTags'].bind('click', resetTags)
</script>