Sorry I assumed react since you had used arrow functions everywhere and in a style that looked like react hooks.
Anyways, so turn your attention to
getDOMElements where you are adding items to the cart. You have a local variable called
cart which is an array that will keep track of the various buttons for adding items into the cart. You create a closure around this cart variable. Meaning that each time one of the buttons are clicked, it is all adding to the same cart (the events are said to “close” around the cart array variable). Which is fine. The problem then comes in your remove where you remove the element from the DOM (inside
handleRemoveItem) but next time someone clicks a button to add, you are again reading that cart variable (which still has all the items in it) and those all get added back to the cart plus the recently clicked item.
What you need to do is that when an item is removed in the cart, this cart variable back in
getDOMElements is modified and recalculated. You would think it is reset, but because you have events closing around it, it is not. Now this is why too many arrow functions and closures can get a bit complicated because it won’t be easy for you to go back and adjust this cart because it is inside event handlers. To prove this,
console.log your cart variable before and after you
unshift an item onto it. You will see that the cart never gets updated when you removed an item and so is used to add all the items back to the cart.
My suggestion would be to escalate the cart variable to a higher level that both the
getDOMElements function can add to and also that the
handleRemoveItem can remove from. This is essentially what a usestate scenario in React would have done for you. The items in your cart is something that is a bit of state information and so many functions will need to see and work with it.
Hopefully you get what I am saying here and sorry for the mistake earlier.