Why are functions being called multiple times on dynamically generated button in JavaScript?

I'm making an application that draws up a list of search results from Google Places API, which gives the user the opportunity to mark a location as visited (which is then stored in MongoDB) using buttons generated dynamically in JavaScript. When I click the button, I see that the event has run about 20 times (incidentally, the same number of places are returned in the search results). This then calls the API endpoint on the server side about 5 times.

I suspect it's something to do with binding the event listener to each individual button but I'm not sure what the fix is. Any help greatly appreciated!

Client-side functions:

              const markVisitedButtons = document.querySelectorAll(".visitor");
              markVisitedButtons.forEach((button) => {
                button.addEventListener("click", function () {
                  console.log("eventlistener");
                  const placeId = this.getAttribute("data-place-id");
                  const placeName = this.getAttribute("placeName");
                  const placeAddress = this.getAttribute("placeAddress");
                  markVisited(placeName);
                });
              });

              function markVisited(placeName) {
                console.log("fetch function");
                fetch(`/markVisited`, {
                  method: "POST",
                  headers: {
                    "Content-Type": "application/json",
                  },
                  body: JSON.stringify({ placeName }),
                })
                  .then((response) => response.json())
                  .then((data) => {
                    console.log(data);
                  })
                  .catch((error) => {
                    console.log(error);
                  });
              }

And the server-side function called following the fetch:

router.post("/markVisited", async (req, res, next) =\> {
    const placeName = req.body;

          try {
            const newPlace = await new VisitedPlace({
              placeName: req.body.placeName,
              userId: req.user._id,
            });
    
            newPlace
              .save()
              .then(
                User.updateOne(
                  { _id: req.user._id },
                  { $push: { visitedPlaces: newPlace._id } }
                )
              );
          } catch (error) {
            console.log(error);
          }
        });

To fix this, you can try using event delegation. Event delegation means attaching a single event listener to a common parent element of the buttons and then using the event object to determine which specific button was clicked.

Here is your client side functions:

const markVisitedButtonsContainer = document.querySelector(".container"); // Use a common parent element
markVisitedButtonsContainer.addEventListener("click", function (event) {
  if (event.target.classList.contains("visitor")) {
    const placeId = event.target.getAttribute("data-place-id");
    const placeName = event.target.getAttribute("placeName");
    const placeAddress = event.target.getAttribute("placeAddress");
    markVisited(placeName);
  }
});



function markVisited(placeName) {
  console.log("fetch function");
  fetch(`/markVisited`, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({ placeName }),
  })
    .then((response) => response.json())
    .then((data) => {
      console.log(data);
    })
    .catch((error) => {
      console.log(error);
    });
}

I've added a container element (replace .container with the actual class or id of the container that holds your buttons) as the common parent element of the buttons. The event listener is attached to this container, and it checks whether the clicked element has the class visitor. If it does, the event is processed. This way, you ensure that you have only one event listener regardless of the number of buttons, and the event won't propagate multiple times.