Increment Independent on list item tags

JavaScript
1

Hello, Everyone

I have a quick question on my code, i want to add a new feature, when incrementing items on clicking the plus icon, for some reason im only able to do it on the first list item tag, but when i add more will only do increment on the first one.

So the main goal its to increment the numbers independent of each list item.
Each list item tag has their own plus sign so each should be independent from each other, and add its corresponding increment.

CodePen:
https://codepen.io/ivanmt07/pen/ExjRJKr

2

Flavio Copes has a quick, easy-to-follow set of examples of how to do this. Check it out.

3

Thanks for infomation @willjw3, So it seems i have done it the right way with bubbling delegation. I still will like to see if im doing it the right way or im missing something, just for best practices, or there is another way of doing it. This is the code i added as well updated codepen. https://codepen.io/ivanmt07/pen/ExjRJKr?editors=1010

// bubbling Event Delegation
const parentResults = document.getElementById('results');
parentResults.addEventListener('click', checkTargetElement);

function checkTargetElement(e){
  
   if(e.target.className === "add"){
    incrementQty(e.target);
  }
   
};

// Increment the Quantity.
function incrementQty(button){
   var qty = button.parentNode.querySelector(".qty");
   var value = parseInt(qty.textContent, 10);
    var change = button.className === "add" ? 1 : -1;
    qty.textContent = value + change;

};
4

You can also use matches. Here is another link with some code.

5

Thank you @lasjorg i will look into it as well. Thanks for the help, very good constructive information. Matches works also as spected in other ways. Thanks!!