javascript - One of my query selector is preventing another from working

Question

I have two VanilaJs click addEventLister for my delete button. two of them are doing what I want them to do but the problem is, only the one on top running but the one below does not run. a.deleteprogram is preventing a.deleteevent because it's above a.deleteevent

I mean the one on top prevents the one below from running. when I switch them they do the same thing to each other. what could be the cause? how do I set my code so that both can run without preventing the other?

 const trashcan = document.querySelector("a.deleteprogram");
 trashcan.addEventListener("click", (e) => {
   const endpoint = `/programs/${trashcan.dataset.doc}`;
     fetch(endpoint, {
       method: "DELETE",
       })
      .then((response) => response.json())
      .then((data) => (window.location.href = data.redirect))
      .catch((error) => console.log(error));
    });




  const trashcan2 = document.querySelector("a.deleteevent");
  trashcan2.addEventListener("click", (e) => {
   const endpoint = `/events/${trashcan2.dataset.doc}`;
     fetch(endpoint, {
      method: "DELETE",
     })
    .then((response) => response.json())
    .then((data) => (window.location.href = data.redirect))
    .catch((error) => console.log(error));
   });

this is my event link <a class="deleteevent" href="" data-doc="<%=event._id%>">Delete</a> and this is my program link <a class="deleteprogram" href="#" data-doc="<%= program._id%>">Delete</a>

question from:https://stackoverflow.com/questions/65850331/one-of-my-query-selector-is-preventing-another-from-working

Answer 1

Waitting for answers