title: All button click functions point to the last id (except last button points to undefined) instead of pointing to its own id
body: <p>
  I want to add a delete button that will delete that specific created "event" when it is clicked ("event" is what the user creates in the app). </p>
  
  <p>Problem: if there are 10 events (id 1-10), clicking on buttons 1-9 will use the id of 10 (the last event number).  However, if I click the 10th event delete button it will give undefined.</p>
  
  <p>Using Postman I can see that the route works and is deleting correctly. However, when I click any button (but the last), the id always points to the number of the last id and deletes that one.  Further, the last button gives (console.logs) "undefined". </p>
  
  <p>I've found a few similar issues, but they all seem to be a slightly different problem (using a for loop least notably).  I'd greatly appreciate any help in understanding what I'm doing wrong. 
  </p>
  
  
  
  
  
  <pre><code>$(document).ready(function () {
  
  $(document).on("click", ".individualEventButton", handleEventDelete);
  
  $.get("/api/events/", (data) =&gt; {
      if (data) {
          const displayData = data;
  
          displayData.forEach((object) =&gt; {
              const eventId = object.id;
              const eventsSection = $("&lt;div&gt;");
              eventsSection.addClass("event");
  
              $(".individualEventButton").data('id', eventId); //adds data-id to each individual button
  
              console.log(eventId);
  
              eventsSection.append("&lt;h2&gt;" + object.title);
              eventsSection.append("&lt;h3&gt;" + object.date);
              eventsSection.append("&lt;p&gt;" + object.description);
              $("#eventsDisplay").append(eventsSection);
  
              const individualEventButton = $("&lt;button/&gt;", {
                  text: "DELETE",
              });
  
              eventsSection.append(individualEventButton);
              individualEventButton.addClass("individualEventButton");
          });
      } else {
          console.log("ERROR GETTING DATA");
      }
  });
  
  function handleEventDelete() {
      const id = $(this).data("id");
     //shows the last created event id if any button is clicked but the last (which shows undefined
      console.log("Show Id: " + id);
  
      //debugger;
      // Send the DELETE request.
      $.ajax("/api/events/" + id, {
          type: "DELETE"
      }).then(
          function () {
              console.log("deleted id ", id);
              // Reload the page to get the updated list
              location.reload();
          }
      );
  }
  
  $("#goToAddEventsPageButton").on("click", ((event) =&gt; {
      event.preventDefault();
      window.location.replace('/userDashboard');
  }));
  });
  </code></pre>