Estoy insertando los valores de una entrada en una matriz de objetos. Luego, quiero obtener esos valores que se muestran dentro del HTML. Insertar cada valor dentro del objeto no es el problema, cada vez que hago clic en el botón, cada valor se agrega con éxito. Cuando consuelo. console.log() la matriz, muestra solo uno de cada valor agregado. El problema es cuando trato de mostrar el contenido del objeto dentro del elemento HTML, inserta todos los datos del objeto una y otra vez, pero solo quiero agregar el último valor agregado y mantener lo que se insertó anteriormente, no para agregar todo de nuevo.

¿Qué estoy haciendo mal?

Este es mi HTML

 <main> <div class="add-recipes"> <form id="form"> <h2>Add Recipe</h2> <div class="input-wrapper"> <div class="text-input-wrapper"> <label for="title" >Title <input type="text" name="title" id="recipe-title" /> </label> </div> </div> <button id="send-recipe-btn" type="submit">Send Recipe</button> </form> </div> <div class="recipes-container"></div> </main>

Este es mi archivo JS

 let recipes = []; const addRecipe = e => { e.preventDefault(); let recipe = { title: document.getElementById('recipe-title').value }; recipes.push(recipe); document.querySelector('form').reset(); recipes.forEach(e => { const recipeContainer = document.querySelector('.recipes-container'); const recipeTitle = document.createElement('div'); recipeTitle.classList.add('recipe-title'); recipeContainer.append(recipeTitle); recipeTitle.textContent = e.title; }); console.log(recipes); }; document.getElementById('send-recipe-btn').addEventListener('click', addRecipe);

Gracias por cualquier consejo o ayuda para resolver esto.