Quantity is not reflected in the cart

Support
#1

Hello. When placing multiple items on the same page,
only the quantity of the topmost item is reflected in the cart. Quantity selections for the second and subsequent items do not reflect in the cart.
I’m copying and pasting the code from the first item, so I don’t think there’s any issue with the second item or beyond.
What problems could be causing this?

#2

Hey @Peregrine

As discussed with our support team. Your Javascript code was selecting only the first element.
This is basic JavaScript code.

Your code:

const button = document.<mark>querySelector</mark>('#B_SISTERS');
const quantity = document.<mark>querySelector</mark>('#quantity');

quantity.addEventListener('change', () => {
  // Sets the default quantity when adding the item
  button.setAttribute('data-item-quantity', quantity.value);
});

querySelector only selects one element; therefore, the event listener is not bound to any of the following inputs. querySelectorAll would work; however, you are using an ID ("#") to select your element. This is bad practice, as IDs must be unique throughout your page. You should use a JavaScript-prefixed CSS class instead.

Best,