I've already created a recipe box and it works with Javascript queryselector which increases the portion number and decreases it.

The problem with queryselector is that it only effects on the first element with the specific class. So when I duplicated this element, nothing works on the second element.

// 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";
  }
};