I am encountering an issue with a dynamic form that allows users to add and remove inputs. Although the form functions correctly visually, the values from inputs created by the JavaScript function are not being retrieved when the form is submitted. If more information is required, please let me know as this is one of the final additions to the website.

Could anyone suggest why this might be happening? My code is provided 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>

Frontend 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])
        }

    }