How do I make my jQuery like functionality work on every post in my project
P粉111927962
P粉111927962 2023-09-16 11:56:50
0
1
1107

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粉111927962
P粉111927962

reply all(1)
P粉959676410

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>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template