title: Javascript selector to effect the multiple elements
body: <p>I've already created a recipe box and it works with Javascript queryselector which increases the portion number and decreases it.</p>
  <p>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.</p>
  <pre class="lang-js prettyprint-override"><code>// Recipe calculator plus/minus actions
  const plusBtn       = document.querySelector(&quot;.portion-plus&quot;);
  const minusBtn      = document.querySelector(&quot;.portion-minus&quot;);
  const portionNumber = document.querySelector(&quot;.portion-number span.portion-counter&quot;);
  // thenum           = &quot;foo3bar5&quot;.match(/\d+/)[0]
  const portionWord   = document.querySelector(&quot;.portion-number span.portion-word&quot;);
  const contentAmount = document.querySelectorAll(&quot;.content-list li span.content-amount&quot;);
  let initRecipeValue = [];
  
  window.addEventListener(&quot;load&quot;, () =&gt; {
    contentAmount.forEach(elem =&gt; {
      initRecipeValue.push(elem.innerText);
    });
  });
  
  let count = 1;
  
  // Increasing the counter
  
  if (plusBtn &amp;&amp; minusBtn) {
    plusBtn.addEventListener(&quot;click&quot;, () =&gt; recipeCalculation(0, 1));
    minusBtn.addEventListener(&quot;click&quot;, () =&gt; recipeCalculation(1, -1));
  }
  
  const recipeCalculation = (limit, addSub) =&gt; {
    if (count &gt; limit) {
      count += addSub;
  
      //console.log(count);
  
      portionNumber.textContent = count;
  
      contentAmount.forEach((content, index) =&gt; {
        content.textContent = initRecipeValue[index] * count;
      });
  
      portionWord.textContent = count &gt; 1 ? &quot;Portionen&quot; : &quot;Portion&quot;;
    }
  };
  </code></pre>
  <p><a href="https://i.stack.imgur.com/rBTAe.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rBTAe.png" alt="javascript queryselector" /></a></p>