When the addIngredientsBtn is clicked, then the program is making a new textbox which is called ingredients in a new line, but I want to make that if I click on this button, then the program is making the quantityList textbox, unit select form and the ingredients textbox, so all of these 3 form in a new line. Here is the code:
sript.js and 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>