Have addEventListener on multiple of the same IDs

Question

I need to add an event listener to my retweet, like and dislike buttons. They all have the same ID so right now only the top tweet has the counter increase. This is a project for school so I can only use raw JS. Here is a link to the fiddle:

https://jsfiddle.net/1sc7g5ko/

And here is what my JS looks like

var retweets;
retweets = 0;

var likes;
likes = 0;

var dislikes;
dislikes = 0;

document.getElementById("retweet").addEventListener("click", retweetClicked);

function retweetClicked(){
    document.getElementById("retweet").innerHTML = retweets += 1;
};

document.getElementById("likes").addEventListener("click", likeClicked);

function likeClicked(){
    document.getElementById("likes").innerHTML = likes += 1;
};

document.getElementById("dislikes").addEventListener("click", dislikeClicked);

function dislikeClicked(){
    document.getElementById("dislikes").innerHTML = dislikes += 1;
};

Answer 1

What @Maxmillian Laumeister said is correct, but there are other solutions and/or workarounds. For example, let's say you have three <BUTTON> elements with the ID of edit. How you would go about adding event listeners to all of these elements is as such:

1. First we would grab all of the elements using querySelectorAll
2. Then, we would loop through with them using forEach
3. Inside/Using this forEach loop, we would then add the event listeners.

Implementation of this process is below. Feel free to view the demo of this on JSFiddle.

https://jsfiddle.net/n1b2u8cm/

document.querySelectorAll("#edit").forEach((e) => {
   e.addEventListener("click", () => {
      document.body.style.background = "red";
      setTimeout(() => {
         document.body.style.background = "blue";
      }, 300);
   });
});