Hello everyone. I am designing a platform similar to a social media platform with a post, like and comment system. I am using jquery for likes and whenever I want to send a text message and want to like a post, only the first post is working but the like system for other posts is not working. How can I solve it. This is the index.php that contains the post and jquery code.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>post</title> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="font/css/all.css"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> <script> $(document).ready(function(){ $("#likings").click(function(){ var name = $("input").val(); $.post("like.php", { sugess: name }, function(data, status){ $("#like").html(data); }); }); }); </script> </head> <?php include('conn.php'); ?> <body> <?php $sql = "SELECT * FROM post"; $result = mysqli_query($conn, $sql); while($row = mysqli_fetch_assoc($result)){ $id = $row['id']; $name = $row['name']; $image = $row['image']; $action = $row['action']; $date = $row['date']; $time = $row['time']; $sqlcount = "SELECT * FROM likes WHERE postid=$id"; $resultcount = mysqli_query($conn, $sqlcount); $count = mysqli_num_rows($resultcount); echo ' <center> <div class="post"> <div class="up"> <div> <img class="img" src="img/'.$image.'"> </div> <div class="uptext"><span class="name">'.$name.' </span><span class="des"> '.$action.' <br>'.$date.' at '.$time.'</span></div> <div> ... </div> </div> <img src="img/'.$image.'"> <div class="liking"> <div class="like"> <i class="fa fa-thumbs-up" aria-hidden="true" style="text-align: left; color: navy;"></i><span id="like">'.$count.'</span> </div> <div> <p>23 comments</p> </div> </div> <div class="likenow"> <div> <input name="id" value="'.$id.'" hidden> <i class="fa fa-thumbs-up" id="likings" aria-hidden="true" style="text-align: left; color: navy;"></i>like </div> <div> <i class="fa-solid fa-message"></i> comment </div> </div> <p style="text-align: left; margin-left: 20px; font-size: 10pt;">view more comments</p> <div class="comments"> <p>itz celeb <br> very nice</p> <p>titi kosi <br> so cute</p> </div> <div class="entercomment"> <div> <img class="img" src="img/'.$image.'"> </div> <div> <input placeholder="Write a comment..."><i class="fa-solid fa-message" style="margin-left: 20px;"></i> </div> </div> </div> </center>'; } ?> </body> </html>
This is the favorite php code.
<?php include("conn.php"); $name = $_POST['sugess']; $sql = "INSERT INTO likes(postid, likes) VALUES('$name', '1')"; $result = mysqli_query($conn, $sql); $sqlcount = "SELECT * FROM likes WHERE postid=$name"; $resultcount = mysqli_query($conn, $sqlcount); $count = mysqli_num_rows($resultcount); echo $count; ?>
So how should I solve it?
Similar content should apply to every post. I used a while loop but I still have the same problem.
P粉9596764102023-09-17 09:27:38
Your problem is with the selector, it is an ID selector, with ID selector you can only select one element, try changing it to a class selector
<i class="fa fa-thumbs-up" id="likings" aria-hidden="true" style="text-align: left; color: navy;"></i>
to
<i class="fa fa-thumbs-up likings" aria-hidden="true" style="text-align: left; color: navy;"></i>
it should be OK
<script> $(document).ready(function(){ $(".likings").click(function(){ var name = $("input").val(); $.post("like.php", { sugess: name }, function(data, status){ $("#like").html(data); }); }); }); </script>