Dynamic input form not submitting

i have a dynamic form which lets you add and remove inputs. The issue is what even though it works visually, when submitting the form i wont get the values from inputs created by the JS function. If you need anything else let me know as this is about the last implementation to the website

Any ideas as to why? i leave my code below

The html:

<div class="form-container" id="form-container">
                        <div class="title-title">
                            <h3 class="recipe-pretitle">Recipe for</h3>
                            <form action="/recipes/create" enctype="multipart/form-data" method="POST">
                                <div>
                                    <label for="title">
                                        <input name="title" type="text" id="title" placeholder="Name of dish">
                                    </label>
                                </div>
                        </div>

                        <div class="description-container">
                            <label class="description-label" for="description">A brief description of your dish: <br> (max 80char)</label>
                            <textarea name="description" type="text" id="description" cols="30" rows="5"></textarea>
                        </div>

                        <div class="directions-ingredients-container">

                            <div id="product-directions">
                                <div class="label-directions"><label for="directions">Cooking steps.</label></div>
                                <div class="controls-ol-container">
                                    <div class="controls">
                                        <a href="#" id="add_more_fields"><i class="fa fa-sm">Add step</i></a>
                                        <a href="#" id="remove_fields"><i class="fa fa-sm">Remove last step</i></a>
                                    </div>
                                    <div class="instruction-list-container">
                                        <ol id="instruction-list">
                                        </ol>
                                    </div>
                                </div>
                            </div>

                            <div class="ingredients-container">
                                <div class="label-ingredients"><label for="Ingredients">Ingredients:</label></div>
                                <div class="controls-ol-container">
                                    <div class="controls">
                                        <a href="#" id="add_more_fields_ingredients"><i class="fa fa-sm">Add Ingredient</i></a>
                                        <a href="#" id="remove_fields_ingredients"><i class="fa fa-sm">Remove last Ingredient</i></a>
                                    </div>
                                    <div class="ingredient-list-container">
                                        <ol id="ingredient-list">
                                        </ol>
                                    </div>
                                </div>
                            </div>

                        </div>

                        <div class="imageInputContainer">
                            <label id="image-label" for="image">Choose an image</label>
                            <input name="image" type="file" id="image">
                        </div>
                        <div>
                            <button type="submit">Upload</button>
                            </form>
                        </div>
                    </div>

Font end JS

 var add_more_fields = document.getElementById("add_more_fields")
    var remove_fields = document.getElementById("remove_fields")
    var directions_container = document.getElementById('product-directions')
    var instruction_list = document.getElementById('instruction-list')



    add_more_fields.onclick = function () {
        var node = document.createElement("li")
        var newField = document.createElement('input')
        newField.setAttribute('type', 'text')
        newField.setAttribute('name', 'directions[]')
        newField.setAttribute('placeholder', 'Add Instruction')
        node.appendChild(newField)

        instruction_list.appendChild(node)
    }

    remove_fields.onclick = function () {
        var input_tags = instruction_list.getElementsByTagName('li')
        if (input_tags.length > 1) {
            instruction_list.removeChild(input_tags[(input_tags.length) - 1])
        }
    }



    var add_more_fields_ingredients = document.getElementById("add_more_fields_ingredients")
    var remove_fields_ingredients = document.getElementById("remove_fields_ingredients")
    var ingredient_list = document.getElementById('ingredient-list')
    



    add_more_fields_ingredients.onclick = function () {
        var node = document.createElement("li")
        var newField = document.createElement('input')
        newField.setAttribute('type', 'text')
        newField.setAttribute('name', 'Ingredients[]')
        newField.setAttribute('placeholder', 'Add Ingredient')
        node.appendChild(newField)
        ingredient_list.appendChild(node)
    }

    remove_fields_ingredients.onclick = function () {
        var input_tags = ingredient_list.getElementsByTagName('li')
        if (input_tags.length > 1) {
            ingredient_list.removeChild(input_tags[(input_tags.length) - 1])
        }

    }