Problem with getting data on current table row in loop - api

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);
});
}