Getting array from appended field with form submit

Question

I have a form which I want to append an additional input field too, but for some reason when I submit the form the fields are not submitting and I can't understand why?

Expected behaviour: Click button, append 1x field to the wrapperVary to the form each time the button is clicked. This part works fine and the field appends and I can type a value into the box.

Then when the form is submitted, I then expect to see these fields in an array, such as follows:

"variant": { "1": { "opt1": "small", "opt2": "blue", "opt3": "cotton", "opt4": "1" }, "2": { "opt4": "2" }, "3": { "opt4": "3" }, "4": { "opt4": "4" } } ` Here is the 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>

Here is the jQuery for appending the fields:

$(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--;
});

});

I am not seeing anything immediately obvious, I have double checked that the syntax/format is correct, nothing showing in the console and as mentioned before the field is appending to the form, but just not showing when submitted?

I also welcome any suggestions on how I can better troubleshoot this.

EDIT:

Important to say, the only data nNOT showing in the submission is the appended field, the fields already in the form are showing in the submitted data.

So currently, submitted data looks like this:

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

Answer 1

Try create new DOM elements. I have had issues in the past when adding html in the form after the DOM was loaded.

Try something like this.

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