flask wtformsでの入力欄をjavascriptで追加する方法

Question

下記のHTMLの様に、flask wtformsで作成されている入力欄をjavascriptでボタンを押すごとに追加作成することはできるでしょうか。

{% block content %}
{{ wtf.form_field(form.procedure) }}
<input type="button" class="btn btn-info" value="記入欄を追加" onclick="addForm()">
{% endblock %}

HTMLで書かれているフォームであれば、入力欄をcreateElement()で作成する以下のコードで動作しますが、wtformsの場合に追加作成される入力欄をjavascriptでどの様に書けば良いのか分からず困っています。HTMLのフォームの様にcreateElement, appendChildは使えないでしょうか。

以下、HTML+javascriptで動作しているコードです。

<div id="form_area">
<div class="form-group">
<label for="input" class="col-sm-2 col-form-label">Step 1</label>
<input type="text" class="form-control col-sm-10" name="procedure"/>
</div>
</div>
<input type="button" class="btn btn-info" value="記入欄を追加" onclick="addForm()">

function addForm() {
  var div = document.createElement("div");
  div.className = "form-group";

  var label = document.createElement("label");
  label.className = "col-sm-2 col-form-label";
  label.for = "procedure";

  var input_data = document.createElement("input");
  input_data.type = "text";
  input_data.className = "form-control col-sm-10";
  input_data.name = "procedure";

  var outerParent = document.getElementById("form_area");

  div.appendChild(label);
  div.appendChild(input_data);
  outerParent.appendChild(div);
}

Answer 1

一応動作する方法が分かりました。
javascriptでwtformsを新規に作成する事は難しそうなので、flaskに記載したwtformsの入力エリアにidを付け、それを基にjavascriptでcloneNodeすることで、wtformsのvalidation等は動作しました。

{% block content %}
{{ wtf.form_field(form.procedure,id="tmp") }}
<input type="button" class="btn btn-info" value="記入欄を追加" onclick="addForm()">
{% endblock %}

function addForm() {
  var tmp = document.getElementById("tmp");
  var input_data = tmp.cloneNode(false);
  input_data.type = "text";
  input_data.value = "";
  input_data.className = "form-control col-sm-10";
  input_data.id = "tejun";
  input_data.name = "procedure";
}