Like system. How to pass specific post_id to js file?

Question

AJAX

I implement social network. At the moment I'm making a system of likes. There are some problems, please help.
Essence: The output of posts is carried out using the getPosts () functions. It outputs all posts of all users through a while loop in reverse order (oldest to newest. As usual).

Now, when I click on the like button, it updates the like in the database of only the most recent post. The problem is that when I pass post_id to js, ​​it stores the id of the most recent post. Thus, the like only works on a fresh post. How to pass the id of a specific post to js?

getPosts() function

function getPosts() {
    global $con;
    $per_page = 4;

    if(isset($_GET['page'])) {
        $page = $_GET['page'];
    }
    else {
        $page = 1;
    }

    $start_from = ($page - 1) * $per_page;
    $get_posts = "select * from posts ORDER by 1 DESC LIMIT $start_from, $per_page";
    $run_posts = mysqli_query($con, $get_posts);

    while($row_posts = mysqli_fetch_array($run_posts)) {
        $post_id = $row_posts['post_id'];
        $user_id = $row_posts['user_id'];
        $content = $row_posts['post_content'];
        $upload_image = $row_posts['upload_image'];
        $post_date = $row_posts['post_date'];
        $post_date = date("H:i   F j, Y", strtotime($post_date));
        $post_like = $row_posts['post_like'];
        $post_com = $row_posts['post_com'];

        $user = "select * from users where user_id='$user_id' AND posts='yes'";
        $run_user = mysqli_query($con, $user);
        $row_user = mysqli_fetch_array($run_user);

        $user_Fname = $row_user['f_name'];
        $user_Lname = $row_user['l_name'];
        $user_image = $row_user['user_image'];

        $u_e = $_SESSION['user_email'];
        $cur_user = mysqli_query($con, "select user_id from users where user_email='$u_e'");
        $cur_user_row = mysqli_fetch_array($cur_user);
        $cur_user_id = $cur_user_row['user_id'];

        $get_like = mysqli_query($con, "select status from post_likes where post_id='$post_id' AND user_id='$cur_user_id'");
        $get_like_row = mysqli_fetch_array($get_like);

        $l_status = $get_like_row['status'];
        ($l_status) ? $isActive = true : $isActive = false;

        //Displaying posts from database

        if($content == '' && strlen($upload_image) >= 1) {
            echo "
            
            <div class='post_container'>

                <div class='post_info'>

                    <div class='post_user_img'>
                        <img src='users/$user_image' class='post_ava'>
                    </div>
                    <div class='post_user_info'>
                        <p><strong><a href='user_profile.php?u_id=$user_id'>$user_Fname $user_Lname</a></strong></p>
                        <span>$post_date</span>
                    </div>

                </div>

                <div class='post_imgAndContent'>
                    <center><img src='imagepost/$upload_image'></center>
                </div>

                <div class='comment_btn'>
                    <a href='single.php?post_id=$post_id'><button><img src='assets/img/commentw.svg' class='svg_img_btn'> <span>$post_com</span></button></a>
                </div>
               <div class='comment_btn like'>
                    <button class='like'><svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.com/svgjs' version='1.1' width='20' height='20' x='0' y='0' viewBox='0 0 51.997 51.997' style='enable-background:new 0 0 512 512' xml:space='preserve' class='svg_img_btn'><g><path xmlns='http://www.w3.org/2000/svg' d='M51.911,16.242C51.152,7.888,45.239,1.827,37.839,1.827c-4.93,0-9.444,2.653-11.984,6.905  c-2.517-4.307-6.846-6.906-11.697-6.906c-7.399,0-13.313,6.061-14.071,14.415c-0.06,0.369-0.306,2.311,0.442,5.478  c1.078,4.568,3.568,8.723,7.199,12.013l18.115,16.439l18.426-16.438c3.631-3.291,6.121-7.445,7.199-12.014  C52.216,18.553,51.97,16.611,51.911,16.242z' fill='#ffffff' data-original='#000000' style='' class='"; if($isActive) echo "liked'"; echo "/><g xmlns='http://www.w3.org/2000/svg'></g></g></svg> <span class='like_span'>$post_like</span></button>
                </div>
            
            </div>

            ";
        }
    }
    include("pagination.php");
}

JavaScript is test code. Couldn't pass specific post id.

$("button.like").on("click", function () {
    var post_id = document.getElementById('forJS').innerHTML;

    alert(post_id);

    var l_status = $($l_status).val();
    var post_likes = $($post_like).val();
    var $user_id = $($cur_user_id).val();

    if(!l_status) {

        $post_like++;
        $('span.like_span').html($post_like);
    }
    else {
        
    }
    
})

Answer 1

Add <div class='post_container'> inside

<input type="hidden" name="post_id" value="$post_id" />

And in JS

var post_id=$(this).parents(".post_container").children("input[name=post_id]").val());

---------------------
Or you can follow Sergey 's advice and add the data-post-id="$post_id" attribute to the button and pull it out via $(this). data("post-id"). And probably it's even more correct for html5.