How to get dynamic class of all output individually in a PHP while loop through jquery

See more:

Javascript

HTML

PHP

i have a project in which i am fetching many output from database through a php while loop now i have a reaction column in each output now when a user clicks on react button i want it to change the value of the div related to that output only but my problem is that when i click on a react button it changes values of all the div having class of react2

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><?php echo "<div><a href='users.php?id=".$users['uid']."'>

      </div></a>";?></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"  style="color: #929292 !important; " href="show.php?post_id=<?php echo $users['id'];?>" style="">  <span class="glyphicon glyphicon-comment trigger" ></span>comments</a>
<div class="wink" id="ex2" style="  color: black;
    width: 30px;
    height: 30px;
    margin-top: -20px;
    margin-left: 209px;
" > <?php  
$query2 = "SELECT * FROM gormint where post_id = $pixid and user_id= $id3";
$fire2 = mysqli_query($con,$query2) or die("can not fetch data from database ".mysqli_error($con));
$query3 = "SELECT * FROM bhai where post_id = $pixid and user_id= $id3";
$fire3 = mysqli_query($con,$query3) or die("can not fetch data from database ".mysqli_error($con));
$query4 = "SELECT * FROM famer where post_id = $pixid and user_id= $id3";
$fire4 = mysqli_query($con,$query4) or die("can not fetch data from database ".mysqli_error($con));
$query5 = "SELECT * FROM muskan where post_id = $pixid and user_id= $id3";
$fire5 = mysqli_query($con,$query5) or die("can not fetch data from database ".mysqli_error($con));
if (mysqli_num_rows($fire2)>0) {
  echo "<img src='gormint.jpg' class='gormint2' >";
}elseif (mysqli_num_rows($fire3)>0) {
  echo "<img src='bhai.jpg' class='bhai2'>";
}elseif (mysqli_num_rows($fire4)>0) {
  echo "<img src='famer.jpg' class='bhai2'>";
}elseif (mysqli_num_rows($fire5)>0) {
  echo "<img src='zakhir.jpg' class='bhai2'>";
} else{
  echo "<img src='wink.png' class='wink2'>";
}



?></div>

<div class="flipClass" id="flip">react</div>

<div class="panelClass" id="panel"> 
  <input type="image" onclick="PlaySound2()" id="display" data-value="<?php echo $users['id'];?>"  src="gormint2.jpg" class="close2 display gormint animated bounceIn " >
              <input type="image" onclick="PlaySound3()" data-value="<?php echo $users['id'];?>" id="display2" src="bhai.jpg" class="close2 display2 bhai animated bounceIn">
              <input type="image" onclick="PlaySound4()" data-value="<?php echo $users['id'];?>" id="display3" src="famer.jpg" class="close2 display3 bhai animated bounceIn">
              <input type="image" onclick="PlaySound5()" data-value="<?php echo $users['id'];?>" id="display4" src="zakhir.jpg" class="close2 display4 bhai animated bounceIn">
              </div>

        </div>
      </div>
<?php
}
}
?>

& this is my script

$('.display').click(function(){
    var value=$(this).attr('data-value');
    $.ajax({url:"reaction.php?pollid="+value,cache:false,
      success:function(result){
        $('.react2').load('img.php?id=<?php echo $users['id'];?>');

    }});
}); 
  $('.display2').click(function(){
    var value=$(this).attr('data-value');
    $.ajax({url:"reaction2.php?pollid="+value,cache:false,
      success:function(result){
       $('.react2').load('bhai.php?id=<?php echo $users['id'];?>');

    }});
});
 $('.display3').click(function(){
    var value=$(this).attr('data-value');
    $.ajax({url:"reaction3.php?pollid="+value,cache:false,
      success:function(result){
   $('.react2').load('famer.php?id=<?php echo $users['id'];?>');
}});
});
 $('.display4').click(function(){
    var value=$(this).attr('data-value');
    $.ajax({url:"reaction4.php?pollid="+value,cache:false,
      success:function(result){
$('.react2').load('zakhir.php?id=<?php echo $users['id'];?>');

    }});
});

What I have tried:

i have searched on forums there they suggested that i should use $(this) but i dont understand how to use $(this) in it plzz help me