Javascript 使用表单提交从附加字段获取数组

我有一个表单，我想附加一个额外的输入字段，但由于某种原因，当我提交表单时，字段没有提交，我不明白为什么

预期行为： 单击按钮，将1x字段附加到包装器。每次单击按钮时，将更改为表单。这部分工作正常，字段追加，我可以在框中键入值

然后在提交表单时，我希望在数组中看到这些字段，如下所示：

“变体”：{
"1": {
“opt1”：“小”，
“opt2”：“蓝色”，
“opt3”：“棉花”，
“opt4”：“1”
},
"2": {
“opt4”：“2”
},
"3": {
“opt4”：“3”
},
"4": {
“opt4”：“4”
}
}

` 以下是HTML：

<form method="POST" action="{{ url('/submit') }}">
            <div class="row">
                <div class="form-group col-md-3">
                    <label>Option 1</label>
                    <select class="form-control" name="variant[1][opt1]">
                        <option value="1"> 1 </option>
                        <option value="2"> 2 </option>
                        <option value="3"> 3 </option>
                    </select>
                </div>

                <div class="form-group col-md-3">
                    <label>Color</label>
                    <select class="form-control" name="variant[1][opt2]">
                        <option value="1"> 1 </option>
                        <option value="2"> 2 </option>
                        <option value="3"> 3 </option>
                    </select>
                </div>


                <div class="form-group col-md-2">
                    <label>Material</label>
                    <select class="form-control" name="variant[1][opt3]">
                        <option value="1"> 1 </option>
                        <option value="2"> 2 </option>
                        <option value="3"> 3 </option>
                    </select>
                </div>
                <div class="form-group col-md-1">
                    <label>Opt4</label>
                    <input type="number" name="variant[1][opt4]" class="form-control">
                </div>
            </div>


            <div class="wrapperVary"></div>
            <a href="javascript:void(0);" class="addVary btn btn-primary btn-sm btn-outline" title="Add field"> <i class="fa fa-plus"></i> Add</a> 


            <div class="card-footer ">
                <button type="submit" class="btn btn-fill btn-info">Submit</button>
            </div>

        </form>

---

尝试创建新的DOM元素。我过去在加载DOM后在表单中添加html时遇到过问题

试试这样的

var element1 = document.createElement("INPUT");         
element1.name="un"
element1.value = un;
element1.type = 'hidden'
form.appendChild(element1);

---

在我看来，你把PHP和Javascript混为一谈了。HTML是一个字符串，所以不能在其中说~${i}~。必须重写该部分是的，在格式方面部分正确，但即使将其重写为“variant['+i+'][opt1]'（i=2）它仍然没有提交，我还添加了i作为标签，以确保它打印到屏幕上并按预期工作。感谢Sebastian，在加载DOM后它可能会与之相关-现在将尝试

"variant": {
"1": {
  "opt1": "small",
  "opt2": "blue",
  "opt3": "cotton",
  "opt4": "1"
},

var element1 = document.createElement("INPUT");         
element1.name="un"
element1.value = un;
element1.type = 'hidden'
form.appendChild(element1);