Problem with getting data on current table row in loop

Question

I need a button that makes it possible to follow a listing. So if the button is clicked in the frontend, the listing_id from the listing the button was to the right of, should be send on to the router with a post statement, and on from there to a T-sql database.

At the moment nothing happens when the "follow" button is clicked, but instead the function "followitem(listing)" is triggered whenever the table is loaded. Currently I get this output when the table loads which contains information on all the listings loaded:

{ userId: '1', listingid: 107 } { userId: '1', listingid: 108 }

So to solve this, the button would need to activate the function "followitem()", and send the listing_id from the listing it was clicked on from.

I hope someone can help me!

findAllListings.addEventListener("click", async () => {
  let maxPriceInput = document.getElementById("price");
  let maxPrice = maxPriceInput.value;
  let maxDateInput = document.getElementById("date");
  let maxDate = maxDateInput.value;
  let locationInput = document.getElementById("location");
  let location = locationInput.value;
  let usedNewInput = document.getElementById("usedNew");
  let usedNew = usedNewInput.value;

  let data = {
    maxPrice,
    maxDate,
    location,
    usedNew,
  };

  table.innerHTML = "";
  table.innerHTML += `
            <tr>
                <th>picture</th>
                <th>name</th>
                <th>category</th>
                <th>price</th>
                <th>location</th>
                <th>used</th>
            </tr>
            `;

  await fetch("http://localhost:4000/allListings", {
    method: "PUT",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify(data),
  })
    .then((res) => res.json())
    .then((res) => {
      console.log(data);
      for (const key in res) {
        if (output == res[key].category) {
          table.innerHTML += `
              <tr>
                  <td><img src="${res[key].picture}" style="height:200px;width:auto;"/></th>
                  <td>${res[key].name}</th>
                  <td>${res[key].category}</th>
                  <td>${res[key].price}</th>
                  <td>${res[key].location}</th>
                  <td>${res[key].usedNew}</th>
                  <td><button onclick="${followItem(res[key].listing_id)}">Follow</button></td>
              </tr>
              `;
        }
      }
    })
    .catch((error) => {
      console.log(error);
    });
});

function followItem(listing) {
  console.log(listing);
  let userId = localStorage.getItem("loggedInUser");
  
  let data = {
    userId: userId,
    listingid: listing,
  };

  fetch("http://localhost:4000/allListings/follow", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify(data),
  })
    .then((response) => response.json())
    .then((data) => {
      if (data.msg === true) {
        window.alert("you are now following this item");
        window.location = "./allListings.html";
      } else if (data.msg === false) {
        window.alert("Error, please try again");
      }
    })
    .catch((error) => {
      console.log(error);
    });
}