trigger events on ejs template? - event-handling

Question

I have an EJS script running a forEach generating html cards.My console.log event works on the first instance of my ejs template, but not the proceeding ones. How do I get event listener working on the proceeding ones??
EJS code snippet:
<form id="likesForm">
<button type="submit" class="dislike btn" id="dislikebtn" style="height: 24px;" value ="<%=i._id%>"><img src="/images\votedwn.png"></button>
<%=i.likes%>
<button type="submit" class="like btn" id="likebtn" style="height: 24px;" value ="<%=i._id%>"><img src="/images\voteup.png"></button>
</form>
Client.js:
const likesForm = document.getElementById("likesForm");
likesForm.addEventListener("submit", () => {
console.log("hi");
});

Answer 1

The reason you are not selecting one and only one is because the ID's need to be unique, and they can not be unique since they are being repeated. You will have to have your event listener in a parent element like a div and work with that instead.
<div id="grabThis">
<form id="likesForm">
<button type="submit" class="dislike btn" id="dislikebtn" style="height: 24px;" value ="<%=i._id%>"><img src="/images\votedwn.png"></button>
<%=i.likes%>
<button type="submit" class="like btn" id="likebtn" style="height: 24px;" value ="<%=i._id%>"><img src="/images\voteup.png"></button>
</form>
</div>
change your ejs to this:
const likesForm = document.getElementById("grabThis");
likesForm.addEventListener("submit", () => {
console.log("hi");
});