Streaming live at 10am (PST)

Custom Quantity Button Problem with Quickview Popup

I am working on an e-commerce project for a client and I have some custom code for the Plus and Minus button for quantity which is below:

<script>
const minusButton = document.getElementById('minus');
const plusButton = document.getElementById('plus');
const inputField = document.getElementById('quantity-5653eb496f4e8e5489bceb6448510ee2');

if (minusButton !== null) {
  minusButton.addEventListener('click', event => {
    event.preventDefault();
  	const currentValue = Number(inputField.value) || 1;
  	if (currentValue > 1) {
    	inputField.value = currentValue - 1;
	  }
    });
  plusButton.addEventListener('click', event => {
  	event.preventDefault();
	const currentValue = Number(inputField.value) || 1;
	inputField.value = currentValue + 1;
  });
};
</script>

So I have also built a custom Quickview Popup on the “Our Products” page and the Plus and Minus button only work on the 1st product Quickview but not the others. I am wondering why this is? Is it because there are several Add To Cart buttons on the same page?

Here are the links:
Share-Link: https://preview.webflow.com/preview/beachfox?utm_source=beachfox&preview=2ff9fa17353a56035666cc49949e78d7&mode=preview

Page Link: https://beachfox.webflow.io/products

Thank you in advance!

I just tried and it seems like it’s working to me… did you resolve this problem?

1 Like

Yeah, someone helped me fix the jquery issue. Thanks!