Cuando se hace clic en addIngredientsBtn , el programa está creando un nuevo cuadro de texto que se llama ingredientes en una nueva línea, pero quiero hacer eso si hago clic en este botón, luego el programa está creando el cuadro de texto de lista de cantidades , el formulario de selección de unidades y el cuadro de texto de ingredientes , por lo que todos estos 3 forman una nueva línea. Aquí está el código:
sript.js e index.ejs
let addIngredientsBtn = document.getElementById('addIngredientsBtn'); let ingredientList = document.querySelector('.ingredientList'); let ingredeintDiv = document.querySelectorAll('.ingredeintDiv')[0]; addIngredientsBtn.addEventListener('click', function(){ let newIngredients = ingredeintDiv.cloneNode(true); let input = newIngredients.getElementsByTagName('input')[0]; input.value = ''; ingredientList.appendChild(newIngredients); }); <div class="container"> <div class="col-md-2"> <label for="quantityList">Quantity</label> <div class="quantityList"> <div class="quantityDiv mb-1"> <input type="text" name="quantity" class="form-control"> </div> </div> </div> <div class="col-md-2"> <label for="unit">Unit</label> <select class="form-select form-control" name="unit" aria-label="unit"> <option selected>select unit</option> <option value="Thai">TSP</option> <option value="American">TBSP</option> <option value="Chinese">CUP</option> </select> </div> <div class="col-md-8"> <label for="ingredientList">Ingredients</label> <div class="ingredientList"> <div class="ingredeintDiv mb-1"> <input type="text" name="ingredients" class="form-control"> </div> </div> </div> </div> <div class="col-12"> <button type="button" class="btn btn-outline-primary" id="addIngredientsBtn">+ Ingredient</button> </div>