Javascript getting index of the DOM element

Add a click handler to the buttons with buttonElement.addEventListener('click', clickHandlerFunction);.

function onMyButtonClick(clickEvent) {
  var button = clickEvent.target;
  console.log('ID of clicked button: ' + button.id);
}

document.addEventListener('DOMContentLoaded', function () {
  document.querySelectorAll('.mybutton').forEach(function (button) {
    button.addEventListener('click', onMyButtonClick);
  })
});

<button id="button-1" class="mybutton" type="button">Button 1</button>
<button id="button-2" class="mybutton" type="button">Button 2</button>

If your buttons looks something like this,

<button type="button" id="save" class="button">Save</button>
<button type="button" id="cancel" class="button">Cancel</button>

You can listen for the click events on the button and get its id using event.target.id

function handleClick(event) {
  console.log(event.target.id);  // prints the id of the clicked button
}

document.querySelectorAll(".button").forEach(function(button) { 
  button.addEventListener('click', handleClick);
});

ES6 approach:

const buttons = document.querySelectorAll(".button");
Array.from(buttons, button => button.addEventListener('click', () => {
    console.log(button.id) // prints the id of the clicked button
}));

1. Select all buttons in document.
2. Use for or forEach to iterate over list of buttons and add event listener to Each of the buttons.
3. Use getAttribute() method to get specific attribute of element(for example "id").

html:

<button class="mybutton" id ="one">1</button>
<button class="mybutton" id="two">2</button>
<button class="mybutton" id="three">3</button>

javascript:

let myButtons = document.getElementsByClassName("mybutton");

for (let i = 0; i < myButtons.length; i++) {
  myButtons[i].addEventListener("click", function(event) {
    event.preventDefault();
    console.log(this.getAttribute("id"));
  });
}

We can also use forEach method but because document.getElementsByClassName returns a HTMLCollection, not an array, with ES6 Array.from() or spread which builds arrays from array-like objects we can use forEach method to iterate over HTMLColection objects. more details in here

[...myButtons].forEach(function(button) {
  button.addEventListener("click", function(event) {
    event.preventDefault();
    console.log(this.getAttribute("id"));
  });
});

Or you can use document.querySelectorAll() that return NodeList instead of document.getElementsByClassName().

let myButtons = document.querySelectorAll(".mybutton");

myButtons.forEach(function(button) {
  button.addEventListener("click", function(event) {
    event.preventDefault();
    console.log(this.getAttribute("id"));
  });
});

Just use for loop, and then check attribute of that element:

<button onClick="buttonClick($event)" id="something1" class="mybutton"></button>
<button id="something2" class="mybutton"></button>
<button id="something3" class="mybutton"></button>

function buttonClick(event) {
 for(var i = 0; i < out.length; i++) {
  if (event.target.attribute[0] === out[i].attributes[0].value){ 
  do something}
 }
}

this is if you need to check something, but click function alone with event will check which button is clicked.