jquery output not working individually on php executed posts - php

Question

i have a query that have many outputs and in those output i want to execute a jquery but that jquery is working in each & every output i want it to work only on the clicked one
this is my code
$query = "SELECT ph.likes, ph.image_url,ph.email,ph.username,ph.uid ,ph.id,ph.avatar_path
FROM photos as ph
inner join followers as fol
on fol.user_id = ph.uid
where fol.uid = '$id'
ORDER BY ph.image_url DESC ";
$fire = mysqli_query($con,$query) or die("can not fetch data from database ".mysqli_error($con));
if (mysqli_num_rows($fire)>0) {
while ($users = mysqli_fetch_assoc($fire)) {
$likes = $users['likes'];
$username = $users['username'];
$uid = $users['uid'];
$pixid = $users['id'];
$avatar_path5 = $users['avatar_path'];
?>
<div class="all" >
<div class="card" >
<div class="float" >
<div class="avatar" >
<img src="<?php echo $avatar_path5; ?>" width="100%" class="avatar">
</div>
<div class="username" style="font-weight: 600; size: 14px; text-decoration: none;">
<p><?php echo "<div><a href='users.php?id=".$users['uid']."'>
<h3>".$users['username']."</h3>
</div></a>"; ?></p>
</div>
</div>
<img src="<?php echo $users['image_url']?>" alt="Avatar" style="width:682px;">
<div class="container">
<h4><b><?php echo "<div><a href='users.php?id=".$users['uid']."'>
</div></a>";?></b></h4>
</div>
<span id="count" class="likes_count"><?php echo $users['likes']; ?> likes</span>
<div style="padding: 2px; margin-top: 5px;">
<?php
if (isset($_POST['liked'])) {
$postid = $_POST['postid'];
$result = mysqli_query($con, "SELECT * FROM photos WHERE id=$postid")or die(mysqli_error($con));
$row = mysqli_fetch_array($result)
or die(mysqli_error($con));
$n = $row['likes'];
mysqli_query($con, "INSERT INTO likes (user_id,username, post_id) VALUES ($id, '$fullname', $postid)")or die(mysqli_error($con));
mysqli_query($con, "UPDATE photos SET likes=$n+1 WHERE id=$postid")or die(mysqli_error($con));
echo $n+1;
exit();
}
if (isset($_POST['unliked'])) {
$postid = $_POST['postid'];
$result = mysqli_query($con, "SELECT * FROM photos WHERE id=$postid")or die(mysqli_error($con));
$row = mysqli_fetch_array($result)or die(mysqli_error($con));
$n = $row['likes'];
mysqli_query($con, "DELETE FROM likes WHERE post_id=$postid AND user_id=$id")or die(mysqli_error($con));
mysqli_query($con, "UPDATE photos SET likes=$n-1 WHERE id=$postid")or die(mysqli_error($con));
echo $n-1;
exit();
}
?>
</div>
<div>
<?php
// determine if user has already liked this post
$results = mysqli_query($con, "SELECT * FROM likes WHERE user_id=$id AND post_id=".$users['id']."")or die(mysqli_error($con));
if (mysqli_num_rows($results) == 1 ): ?>
<!-- user already likes post -->
<span class="unlike fas fa-heart animated bounceIn" data-id="<?php echo $users['id']; ?>"></span>
<span class="like hide far fa-heart" onclick="PlaySound()" data-id="<?php echo $users['id']; ?>"></span>
<?php else: ?>
<!-- user has not yet liked post -->
<span class="like far fa-heart" onclick="PlaySound()" data-id="<?php echo $users['id']; ?>"></span>
<span class="unlike hide fas fa-heart animated bounceIn" data-id="<?php echo $users['id']; ?>"></span>
<?php endif ?>
<a class="com" href="comments.php"> <span class="far fa-comment"></span></a>
<p>This is a paragraph.</p>
<button class="y<?php echo $users['id']?>">Toggle slideUp() and slideDown()</button>
<script>
$(document).ready(function(){
$(".y").click(function(){
$("p").slideToggle();
});
});
</script>
</div>
</div><br><br>
<?php } ?>
see this script in my code
<p>This is a paragraph.</p>
<button class="y<?php echo $users['id']?>">Toggle slideUp() and slideDown()</button>
<script>
$(document).ready(function(){
$(".y").click(function(){
$("p").slideToggle();
});
});
</script>
i want it to work only on the clicked post not on each & every post please help me out
for ex a if click on a post button so i want this script to work only for that
particular post's button not for every post button how to solve this

Answer 1

You seem to have the jquery selectors mixed up. From my reading of your PHP you apply a variable class name to the buttons that starts with y, then you select those with a class of y which won't match.
One way round this would be to also apply a consistent class to all the buttons (buttonclass in my example)
Then you're selecting all <p> elements to apply the slideToggle() instead of just the one whose button was clicked. You need to apply it only to the parent <p>.
This is one method of doing it:
$(document).ready(function(){
$(".buttonclass").click(function(){
$(this).parent().slideToggle();
});
});