Follow unfollow working only first row php while loop

I’m working on a follow and unfollow system project but there seems to be a problem with my code

The follow unfollow button only work for the first row.
How can i get it to work for different rows
I have tried different ways but none seem to be working
Here is my Php while loop code and J’s code below

 $check_following_or_not = mysqli_query($db,"select * from follow_and_unfollow_activity where page_owners_emails = '{$_SESSION["username"]}'");  
        while($de=mysqli_fetch_array($check_following_or_not)) {      
         $page_owner=$de['followers_emails'; 
       if(mysqli_num_rows($check_following_or_not) > 0)

      {?>
    <span hidden data-src="loading.gif"></span>

                    <span  style="background:purple;color:white;opacity:0.6"  class="button actions__btn text-uppercase font-900 " id="following" onClick="follow_or_unfollow('<?php echo $page_owner; ?>','<?php echo $_SESSION["username"]; ?>','following');"><b>Following    <?php echo $page_owner;?> </b> <i class="fa fa-check"></i></span>
     <? if(!isset($_SESSION['username']))
{echo'<a href="/ver/dist">';}?>
    <button style="display:none;background-color:" class="actions__btn actions__btn--active follow" id="follow" onClick="follow_or_unfollow('<?php echo $page_owner; ?>','<?php echo $_SESSION["username"]; ?>','follow');">
<font color="">Follow    <?php echo $page_owner;?>     </font></button>
            
    <? if(!isset($_SESSION['username'])){echo'</a>';}?>
      <?php} 

else{<? if(!isset($_SESSION['username'])){echo'<a href="/ver/dist">';}?>
                    
    <span hidden data-src="loading.gif"></span>
     <button class="actions__btn actions__btn--active follow " id="follow" onClick="follow_or_unfollow('<?php echo $page_owner; ?>','<?php echo $_SESSION["username"]; ?>','follow');" <? if(!isset($_SESSION['username'])){

     echo'';}?>>Follow <?php echo $page_owner;?> </button>
     <? if(!isset($_SESSION['username']))
{echo'</a>';}?>
     <span   style="display:none;background:purple;color:white;opacity:0.6" class="button actions__btn text-uppercase font-900" id="following" onClick="follow_or_unfollow('<?php echo $page_owner; ?>','<?php echo $_SESSION["username"]; ?>','following');"><b>Following     <?php echo $page_owner;?> </b> <i class="fa fa-check"></i></span>

     <?
      }?>
     <?}?>

Here is my My Js code

$(document).ready(function(){     $('.following').hover(function()
{                 $(this).text("Unfollow");},function()
{                  $(this).text("Following");
  });
 });
             
        
    function follow_or_unfollow(page_owner,follower,action)
    {
        var dataString = "page_owner=" + page_owner + "&follower=" + follower;
        $.ajax({  
            type: "POST",  
            url: "follow_or_unfollow.php",  
            data: dataString,
            cache: false,
            beforeSend: function() 
            {
                if ( action == "following" )
                {
                    $("#following").hide();
                    $("#loading").html('<img src="images/loading.gif" align="absmiddle" alt="Loading...">');
                }
                else if ( action == "follow" )
                {
                    $("#follow").hide();
                    $("#loading").html('<img src="images/loading.gif" align="absmiddle" alt="Loading...">');
                }
                else { }
            },  
            success: function(response)
            {
                if ( action == "following" )
                {
                    $("#loading").html('');
                    $("#follow").show();
                    
                }
                else if ( action == "follow" )
                {
                    $("#loading").html('');
                    $("#following").show();
                }
                else { }
            }
        }); 
    }