const ul = document.querySelector("ul");

ul.addEventListener("click", clickHandler);

function clickHandler(e) {
	// finding the button which was clicked
	const button = e.target;

	// finding the parent element of the button
	const buttonContainer = button.parentElement;

	// finding the quantity of the item for which the button was clicked
	// buttonContainer is a div with 3 elements in the following order
	// 1. decrease button, 2. quantity element (span), 3. increase button
	const quantityElement = buttonContainer.children[1]; // since the index starts with 0, hence quantityElement is addressed by 1 index
	const currentQuantity = Number(quantityElement.innerText); // converting innerText value to numerical value, by default it is string

	// changing the quantity based on the -/+ button clicked
	switch (e.target.className) {
		case "increase":
			quantityElement.innerText = currentQuantity + 1;
			break;
		case "decrease":
			quantityElement.innerText = currentQuantity === 0 ? 0 : currentQuantity - 1;
			break;
	}
}