If you are going to have multiple products on a page and don’t want to put an id on the select tag, you nevertheless will probably want to use a unique ID on a tag at a higher level in the DOM for each product. And also pass that value to your addQty function. Then you could use querySelector, something like this,:

var qtySelect = document.querySelect("#uniqueId .qty");
var qty = qtySelect.options[qtySelect.selectedIndex].value;

Looks like you’re using getElementById, but the element you’re trying to get doesn’t have that id. You should either add the id to that element or search by something else, like classname. Here’s what the id solution would look like:

<div class="card-footer">
    <select class="qty" id="qty">
    ...
</div>

Problem: I have a simple storefront on my website which allows users to select a quantity and then add to cart. The problem I am experiencing is when a user adds to cart, the function is grabbing the first <select> <option> in the html file. The result is that any item added to the cart is being added by the first selectors quantity. I am avoiding using ids and passing them to the function because at some point all storefront items would be dynamically loaded in.
This is my first web development experience.

Expected Result: When selecting a quantity for an item and adding to cart, the quantity should be dependent on the “nearest” quantity.

My Understanding: In my addQty(); function below the var e = document.getElementByClassName("qty);" should get the closest “qty” class to the function call. I am at a loss of how to do that.

Code: The following is what an item card html looks like (there are multiple item cards) and the JS function I have written.

*HTML

<div class="card-footer">
    <select class="qty">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
    </select>
    <button onclick="addQty();">Add to Cart</button>
</div>

JS

function addQty()
{
  var e = document.getElementClassName("qty");
  var qty = e.options[e.selectedIndex].value;
  var s =
  {
    //Reset the cart session  to remove everything added to the cart previously.
    'reset':true,
    //Define the product path(s) and the quantity to add.
    'products' : [
      {
        'path':'test-product',
        'quantity': qty
      }
    ],
    'checkout': false
  }
  fastspring.builder.push(s);
}

Thank you for your help.

MY SOLUTION
I added a productID higher up in the DOM for each product. That is then used in the querySelector() call to identify which select is being referenced.

<div class="column" id="test-product-2">
    <div class="card-footer">
        <select class="qty">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
        </select>
        <button onclick="addQty('test-product-2');">Add to Cart</button>
    </div>
</div>

function addQty(product_path)
{
  var selector = "#" + product_path + " .qty";
  var e = document.querySelector(selector);
  //var e = document.closest("qty");
  var qty = e.options[e.selectedIndex].value;
  var s =
  {
    //Reset the cart session  to remove everything added to the cart previously.
    'reset': false,
    //Define the product path(s) and the quantity to add.
    'products' : [
      {
        'path':product_path,
        'quantity': qty
      }
    ],
    'checkout': false
  }
  fastspring.builder.push(s);
}