表单动态添加表单字段

Question

我正在努力将表单字段动态添加到我的网站中，然后我可以使用Flask从中获取数据

我的页面如下所示：

注意，我目前使用JavaScript添加HTML代码

function addDataField(x) {
   if (x == 'container_kenntnisse') {
      let id_increment = document.getElementById('container_kenntnisse').childElementCount;    
      document.getElementById(x).insertAdjacentHTML('beforeend', '<div id="datafield_kenntnisse' + id_increment + '"><input class="float-start data-input-field multiple-line double-input" id="data_kenntnisse' + id_increment + '" name="data_kenntnisse' + id_increment + '" placeholder="Tool / Skill" type="text" value=""><select class="float-end titel-dropdown data-input-field multiple-line double-input" id="data_kenntnisse_niveau' + id_increment + '" name="data_kenntnisse_niveau' + id_increment + '" ><option selected="" value="Bitte auswählen...">Bitte auswählen...</option><option value="Grundkenntnisse">Grundkenntnisse</option><option value="Gute Kenntnisse">Gute Kenntnisse</option><option value="Professionelle Kenntnisse">Professionelle Kenntnisse</option></select></div>');
   }
}

如果我现在单击蓝色按钮，它将如下所示：

这是该部分的HTML容器。它是在一个更大的形式

<div id="container_kenntnisse" class="data-container">
   <div id="datafield_kenntnisse0">
      <input class="float-start data-input-field multiple-line double-input" id="data_kenntnisse" name="data_kenntnisse" placeholder="Tool / Skill" type="text" value="">
      <select class="float-end titel-dropdown data-input-field multiple-line double-input" id="data_kenntnisse_niveau" name="data_kenntnisse_niveau"><option selected="" value="Bitte auswählen...">Bitte auswählen...</option><option value="Grundkenntnisse">Grundkenntnisse</option><option value="Gute Kenntnisse">Gute Kenntnisse</option><option value="Professionelle Kenntnisse">Professionelle Kenntnisse</option></select>
   </div>
   <div id="datafield_kenntnisse1">
      <input class="float-start data-input-field multiple-line double-input" id="data_kenntnisse1" name="data_kenntnisse1" placeholder="Tool / Skill" type="text" value="">
      <select class="float-end titel-dropdown data-input-field multiple-line double-input" id="data_kenntnisse_niveau1" name="data_kenntnisse_niveau1"><option selected="" value="Bitte auswählen...">Bitte auswählen...</option><option value="Grundkenntnisse">Grundkenntnisse</option><option value="Gute Kenntnisse">Gute Kenntnisse</option><option value="Professionelle Kenntnisse">Professionelle Kenntnisse</option></select>
   </div>
</div>
<button class="btn btn-primary float-end small-button data-input-button" type="button" onclick="addDataField(&#39;container_kenntnisse&#39;)">Weitere Kenntnis hinzufügen<i class="fas fa-plus"></i></button>

我目前正在添加纯HTML格式的新字段。 我的表格如下所示：

data_kenntnisse = StringField('data_kenntnisse', render_kw={'placeholder': 'Tool / Skill'})
data_kenntnisse_niveau = SelectField('data_kenntnisse_niveau', choices=[('Bitte auswählen...', 'Bitte auswählen...'), ('Grundkenntnisse', 'Grundkenntnisse'), ('Gute Kenntnisse', 'Gute Kenntnisse'), ('Professionelle Kenntnisse', 'Professionelle Kenntnisse')])

任何“我的数据模型”都只有两个字段：

data_kenntnisse = db.Column(db.String(255))
data_kenntnisse_niveau = db.Column(db.String(255))

是否有一种方法可以动态添加表单字段，以便我可以使用Flask读取添加的表单字段