如何在addEventListener中捕获两个相同的ID但不同的类

Question

first of all, thank you for your time to read this question, and two things, I'm using ES5 and I don't use jQuery.

Right now I'm struggling a lot to figure what's the correct solution for the addEventListener, because for some reason it does not trigger for the second button which is only for the mobile screen dimensions, the problem is that the second button have the same id but different class, for example this:

 <div class="product-bg-container product-general-info variation-info">
  <input type="hidden" name="sku" value="Something-15892290" id="selected-option">

  {/* Desktop screen button */}
  <button id="buy-now" class="btn btn-lg hidden-sm-down btn-primary">
    Add to Cart
  </button>

  {/* Mobile screen button */}
  <button id="buy-now" class="btn btn-lg hidden-md-up btn-primary"> 
    Add to Cart 
  </button>
 </div>

Where I am trying to trigger the second button but it does not where I don't understand why it does, if the id is the same, should not matter, so I'm trying to figure how to trigger from the first button if it's clicked and also with the second if it's clicked, but I'm out of ideas...

var button = document.getElementById('buy-now');

if (!button) {
    return;
  }

button.addEventListener('click', function trackAddToCart() { 
  // more code for the event
}

I thought an idea to capture the attribute of the button, but it works in the first button but not for the second one:

var button = document.getElementById('buy-now');
var att = button.getAttribute('class');

  button.addEventListener('click', function() {
        console.log('class ' + att); //shows: class:    btn btn-lg hidden-sm-down btn-primary
        console.log('button class? '+ button); //shows:  button element: [object HTMLButtonElement]
      });

But when I click the second button... does not trigger or happening nothing, not sure why... and I can't change the id value (which it should be easy but I can't "company standard")

Can anyone help me to have an idea how to capture and trigger the event for the second button ??

Answer 1

The attribute id must be unique in a document. You can use attributeStartsWith selector or class with querySelectorAll() . Then loop through all the button to attach the event ( click ) individually:

 //var button = document.querySelectorAll('.btn.btn-primary'); var button = document.querySelectorAll('[id^=buy-now]'); button.forEach(function(btn){ btn.addEventListener('click', function() { console.log('class ' + this.classList); console.log('button class? '+ this.id); }); }); 

 <div class="product-bg-container product-general-info variation-info"> <input type="hidden" name="sku" value="Something-15892290" id="selected-option"> <button id="buy-now" class="btn btn-lg hidden-sm-down btn-primary"> Add to Cart </button> <button id="buy-now2" class="btn btn-lg hidden-md-up btn-primary"> Add to Cart </button> </div> 

Answer 2

nextElementSibling seems working in this case.

 var btn1 = document.getElementById("btn"); var btn2 = btn1.nextElementSibling; btn1.addEventListener("click",function(e){ console.log("btn1"); }); btn2.addEventListener("click",function(e){ console.log("btn2"); }); 

 <div> <button id="btn" class="btn1">butotn 1</button> <button id="btn" class="btn2">butotn 2</button> </div>