Update item before adding to cart issues

I’m having issues with updating the item (quantity, custom option) before adding to cart.
I input the quantity or option before clicking the add to cart button but in the cart it shows the default quantity and option in the cart.

I tried the code on the documentation and doesn’t work.
Products – Snipcart Documentation

Here is the code I’ve been using.

<label class="option-name">
Quantity</label>

<input id="quantity" class="input-qty" type="number">

<button
  id="product"
  class="snipcart-add-item"
  data-item-id="product"
  data-item-price="8.99"
  data-item-url="/"
  data-item-description=""
  data-item-image=""
  data-item-name="Product"
  data-item-weight="100"
  >
  Add to cart
</button>

<script>
const button = document.querySelector('#product')
const quantity = document.querySelector('#quantity')
quantity.addEventListener('change', () => {
   Sets the default quantity when adding the item
  button.setAttribute('data-item-quantity', quantity.value)
})
</script>

Hi @luneroots

Here is a working example for updating quantity before adding to cart: Update quantity before adding to cart - CodeSandbox

Let me know if this helps you make it work on your side,
Cheers!