Manipulating only the first row of a foreach loop and manipulating all rows at the same time

Question

I am trying to add a delete button which is only visible for Admin. But at the same time, the first row would have a 'I have read this information' button for the users. On this code the delete button cannot be hidden for all rows. The delete button gets only hidden for the first row. I want the delete button not appear anywhere if the user is not an administrator.

I have tried this javascript code but it affects only the first row of my foreach loop. I have no idea what to do. Do you have any idea?

 <?php     if(($_SESSION['username'] == 'Admin')) { 

    echo "<script>  $('#del_photo').hide(); </script> ";
    }




                foreach($select as $index => $rs) {


    ?>    

                <div class="post-id"   id="<?php echo $rs['id']; ?>" style="margin 300px; overflow: hidden; border-top-right-radius: 25px; border-top-left-radius: 25px;   display:block;
                position: relative; margin: 20px; border: 2px solid #222;">
                <br><br>
                <h2 class="blog-post-title"><?php echo $rs['title'];?></h2>
                <p class="blog-post-meta"> <?php echo $rs['date'];?> skrevs av <a href="#"> <?php echo $rs['author'];?></a></p>

                        <?php 
                            $i = 0;
                            $len = count($select);
                            foreach ($select as $item) {
                            if ($i == 0) {
                            echo  "<form action=\"#\" style=\" height:30px; background:transparent; border:none; color:transparent;\" method=\"get\"> <button name=\"readit\" id=\"readit\" 
                            style=\" height:30px; position:absolute; background:transparent; border:none; color:transparent; width:70px;  display: flex; top:-0.5%; left:0%; float:right; margin:5px 5px 0 0;\"  
                            class=\"del_photo\"> <span src=\"sett.png\" class=\"readit\" id=\"readit\" ></span><img src=\"sett.png\"  class=\"readit\"  border=\"0\" /></button> </form>";
                            } else if ($i == $len - 1) {
                            echo "// last";
                            }

                            $i++;
                            }   
                        ?>

                <br>
                <center><p style="margin-left:auto; margin-right: auto; display:block; height: 100%; max-width: 100%;  margin-bottom:0px;"><?php echo $rs['content'];?></p></center></br>
                <img style=" margin-left:auto; margin-right: auto; display:block; height: 100%; max-width: 100%;  margin-bottom:0px;" src='<?php echo $rs['image'];?>' width="400" height="300">            
                <button  id="del_photo" style=" background:transparent; border:none; width:350px; height: 250px; color:transparent;  display: inline-block; 
                float:right; margin:5px 5px 0 0; position: absolute; top: 0; right: 0;"  
                class="del_photo" onclick="deletepost('<?php echo $rs['id']; ?>')"> <span class="del_photo" id="del_photo" src="x.png"  style="  display: inline-block; 
                float:right; margin:5px 5px 0 0; position: absolute; top: 0; right: 0;" 
                id="" ></span><img  class="del_photo" id="del_photo" src="x.png"   style="  display: inline-block;  
                float:right; margin:5px 5px 0 0; position: absolute; top: 0; right: 0;"  class="del_photo"  border="0" /></button>
              </div>




    <?php
        }
    ?>

Answer 1

The problem is that you telling jquery to hide the button with the id="del_photo"

but an id is means to be unique so that won't work in that case and only hide the first one, so you better use the class del_photo

so try

echo "<script> $('.del_photo').hide(); </script> ";