Ya he creado un cuadro de recetas y funciona con el selector de consulta de Javascript, que aumenta el número de la porción y lo disminuye.

El problema con queryselector es que solo afecta al primer elemento con la clase específica. Entonces, cuando dupliqué este elemento, nada funciona en el segundo elemento.

 // Recipe calculator plus/minus actions const plusBtn = document.querySelector(".portion-plus"); const minusBtn = document.querySelector(".portion-minus"); const portionNumber = document.querySelector(".portion-number span.portion-counter"); // thenum = "foo3bar5".match(/\d+/)[0] const portionWord = document.querySelector(".portion-number span.portion-word"); const contentAmount = document.querySelectorAll(".content-list li span.content-amount"); let initRecipeValue = []; window.addEventListener("load", () => { contentAmount.forEach(elem => { initRecipeValue.push(elem.innerText); }); }); let count = 1; // Increasing the counter if (plusBtn && minusBtn) { plusBtn.addEventListener("click", () => recipeCalculation(0, 1)); minusBtn.addEventListener("click", () => recipeCalculation(1, -1)); } const recipeCalculation = (limit, addSub) => { if (count > limit) { count += addSub; //console.log(count); portionNumber.textContent = count; contentAmount.forEach((content, index) => { content.textContent = initRecipeValue[index] * count; }); portionWord.textContent = count > 1 ? "Portionen" : "Portion"; } };