Получение массива из добавленного поля с отправкой формы

Question

У меня есть форма, к которой я также хочу добавить дополнительное поле ввода, но по какой-то причине, когда я отправляю форму, поля не отправляются, и я не могу понять, почему?

Ожидаемое поведение: Нажмите Кнопка, добавьте 1x поле к wrapperVary к форме при каждом нажатии кнопки. Эта часть работает нормально, поле добавляется, и я могу ввести значение в поле.

Затем, когда форма отправлена, я ожидаю увидеть эти поля в массиве, например:

"variant": { "1": { "opt1": "small", "opt2": "blue", "opt3": "cotton", "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>

Вот jQuery для добавления полей:

$(document).ready(function(){

//variables
var addButton = $('.addVary');
var Div = $('.wrapperVary');
var maxUse = 10;

var x = 1;
var i = 2;
var HTML = "<input name='variant[${i}][opt1]'>";

//add
$(addButton).click(function(){
    if(x < maxUse){ 
        $(Div).append(HTML);
        x++;
        i++;
    }
});

//remove
$(Div).on('click', '.removeVary', function(e){
    e.preventDefault();
    $(this).parent('div').remove();
    x--;
});

});

Я не вижу ничего сразу очевидного, я дважды проверил, что синтаксис / формат правильный, ничего не отображается в консоли и, как уже упоминалось, поле добавляется в форму, но просто не отображается при отправке?

Я также приветствую любые предложения о том, как лучше устранить эту проблему.

РЕДАКТИРОВАТЬ:

Важно отметить, что единственное значение nNOT, отображаемое в представлении, - это добавленное поле, поля в форме отображаются в отправленных данных.

Итак, в настоящее время отправленные данные выглядят так:

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

Answer 1

Попробуйте создать новые элементы DOM. У меня были проблемы в прошлом при добавлении html в форму после загрузки DOM.

Попробуйте что-то вроде этого.

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