I'm currently working on a database query that retrieves all user posts. This query is then used in a forEach loop to generate a post for each result:
for($indexPost=0; $indexPost < $postCount; $indexPost++) {
//Code for handling the post
echo<<<_END
<form action="feedLikes.php" id="likePostForm" method="post">
<input type="hidden" name="feedIDForLike" class="feedIDForLike" value="$feedID">
<button type="submit" class="likeButton"></button>
</form>
_END;
}
All post information is correctly displayed when loaded. However, I am facing an issue with the like button functionality. When the like button is clicked, it triggers an ajax call:
$(document).ready(function()
{
$('#likePostForm').on('submit', function (e) {
e.preventDefault();
likePost();
});
});
function likePost()
{
var feedIDLike = $(".feedIDForLike").val();
$.ajax({
url: "feedLikesClicked.php",
cache: false,
type: "POST",
data: {feedIDLike: feedIDLike},
dataType: "html",
success: function(html){
location.reload();
}
});
}
This implementation works, but there's a problem - when I click the like button on a post, the entry gets duplicated in the database for every post on the feed. The issue seems to be that the ajax call is triggered by all posts rather than just the one I clicked on.
So my question is, how can I modify the ajax function to run only for the individual form that was clicked, especially considering the forms were created in a loop?
Any help or suggestions would be greatly appreciated.
Attempts So Far
As each form ID needs to be unique, I tried changing the form line to:
<form action="feedLikes.php" id="likePostForm$feedID" method="post">
And then updated the jQuery line at the top to:
var feedID = $(".feedIDForLike").val();
$('#likePostForm'+ feedID).on('submit', function (e) {
e.preventDefault();
likePost();
});
Unfortunately, this approach yielded the same results.