Wsrtjtyk

I am building a visitor management system. On the admin back end I am trying to add the ability for manual sign-outs. I have visitor cards that show the visitor information along with a button to view their profile and a button which will sign them out. - https://ibb.co/f7y5yV

I have done a PHP foreach to pull the visitor's data from the database and then display them in their own card. This is the code for the cards

<?php foreach ($result as $row) : ?>



        <div class="visitor-tile">

            <div class="visitor-tile-container">

                <div class="my-photo-container">

                    <img src="../images/visitor-photos/<?php echo htmlspecialchars($row['id']);?>-<?php echo htmlspecialchars($row['image_path']);?>" class="profile-img img-circle center-block"></td>

                </div>

                <h2 class="profile-visitorname">

                    <?php echo htmlspecialchars($row['first_name']) ?> <?php echo htmlspecialchars($row['last_name']);?>

                </h2>

                <p class="profile-label">Vehicle Reg: <span class="profile-data"><?php echo htmlspecialchars($row['vehicle_reg']) ?></span></p>

                <p class="profile-label">Visiting: <span class="profile-data"><?php echo htmlspecialchars($row['visiting']);?></span></p>

                <p class="profile-label">Arrival Time: <span class="profile-data"><?php echo substr(htmlspecialchars($row['sign_in_time']), 11, -3);?></span></p>

            </div>

            <div class="visitor-tile-buttons">

            <a href="visitor_profile.php?id=<?php echo htmlspecialchars($row['person_id']);?>" class="view-profile"><i class="fas fa-user"></i></a>

            <a href="#" class="sign-out" id="myLink" onclick="return confirm_delete()"><i class="fas fa-sign-out-alt"></i></a>

            <script type="text/javascript">

            function confirm_delete() {

              return confirm('Are you sure you want to sign out <?php echo htmlspecialchars($row['first_name']) ?> <?php echo htmlspecialchars($row['last_name']);?>');

            }

            </script>

            </div>



        </div>

<?php endforeach ?>

For the sign out button I am trying to do a confirm in javascript to ask the user if they are sure they want to sign the visitor out, but want to pull the visitor's name from the result and put it into the confirm message. I have tried to do this here but it only appears to pull the first result from the query for all of the visitor cards

<a href="#" class="sign-out" id="myLink" onclick="return confirm_delete()"><i class="fas fa-sign-out-alt"></i></a>

        <script type="text/javascript">

        function confirm_delete() {

          return confirm('Are you sure you want to sign out <?php echo htmlspecialchars($row['first_name']) ?> <?php echo htmlspecialchars($row['last_name']);?>');

        }

        </script>

I think I need to push the result to the JS somehow but am not entirely sure.

This is happening because you are making your <script> inside the PHP foreach loop - so you get one script for each user. And since the script defines one function, which is the same in each function, the functions are over-writing each other.

You should just make one <script> tag, outside of the loop. And in order to get it to show the correct details for the user clicked on, you can pass in parameters, like this.

Eg. the function can be:

    function confirm_delete(firstName, lastName) {

      return confirm('Are you sure you want to sign out ' + firstName + ' lastName;?>');

    }

And define your link like this in the loop:

<a href="#" class="sign-out" id="myLink" onclick="return confirm_delete(<?php echo htmlspecialchars($row['first_name']);?>, <?php echo htmlspecialchars($row['last_name']);?>)"><i class="fas fa-sign-out-alt"></i></a>

Or use data attributes as mentioned by @JonStirling - this would lead to neater code.