PHP: My button doesn't properly work inside a foreach loop

Question

I have this find_all() function which is written in a separate file:

public static function find_all() {
    return self::find_by_sql("SELECT * FROM ".self::$table_name);
}

It was referenced at the top of the file that includes my foreach loop:

<?php require_once("../../includes/initialize.php"); ?>
<?php if (!$session->is_logged_in()) { redirect_to("login.php"); } ?>
<?php
    $parents = UserParent::find_all();
?>

This is the foreach loop:

<?php foreach($parents as $parent): ?>
        <div class='popup-screen' id = "popup">
          <div class = "spacing">
            Do you want to delete this data?
          </div>
            <a href="list_users.php?parentNum=<?php echo $parent->parentNum; ?>"> <input type="button" value="YES" class = "popup-button"> </a>
            <input type="button" value="CANCEL" class = "popup-button" onClick = "hide();">
        </div> 
        <tr class = "tr-1">
          <td onClick = "document.location = 'viewParent.php?parentNum=<?php echo $parent->parentNum; ?>';"><img src="../<?php echo $parent->image_path(); ?>" width="100" height = "100" class = "profile-pic"/></td>
          <td onClick = "document.location = 'viewParent.php?parentNum=<?php echo $parent->parentNum; ?>';">Parent</td>
          <td onClick = "document.location = 'viewParent.php?parentNum=<?php echo $parent->parentNum; ?>';"><?php echo $parent->username; ?></td>
          <td onClick = "document.location = 'viewParent.php?parentNum=<?php echo $parent->parentNum; ?>';"><?php echo ucwords($parent->firstName); ?></td>
          <td onClick = "document.location = 'viewParent.php?parentNum=<?php echo $parent->parentNum; ?>';"><?php echo ucwords($parent->lastName); ?></td>
          <td onClick = "show();"><img src = "../stylesheets/images2/delete-icon.png" height="25" width="25" ></td>  
        </tr>
<?php endforeach; ?>

And this is the javascript code:

function show() 
{
    document.getElementById("popup").style.display='block';
}

function hide(){
    document.getElementById("popup").style.display='none';
}

Basically, what my code does is to create rows of information that gets its data from the foreach loop. At the end of each row is a delete icon, as illustrated by the img tag. Upon clicking the delete icon, the show() function will run (The show() function just shows the popup div, which is invisible) -- confirming if the user wants to delete his/her data or not. If the user clicks CANCEL, the window will close, as illustrated by the javascript code. If the user click YES, it is SUPPOSED to go to the link: list_users.php?parentNum=parentNum; ?> (The value of $parent->parentNum is different for each row). However, the anchor tag ALWAYS retrieves the link for the first row regardless of whether it's the third row or whatever (The links on the other td tags work, by the way). Now, my question is, how do I correctly link the YES button for each row on the popup div?

Answer 1

The value of $parent->parentNum is different for each row

But in your code, it's not:

<?php echo $parent->parentNum; ?>

The value isn't incremented or changed or anything so it's the same for all rows.

---

Also, I'd strongly recommend using the <button> or <a> elements for this. That's what they were made for. <td>s weren't meant to be clicked. Good design practice is (almost) always worth a little extra effort.

IMO, your code should look more like

...
<td><a href='viewParent.php?n=<?php echo $n; ?>'></a></td>
...
<button name='show' value='1'>Show</button>

...where $n is from a for loop. Then at the top of the page

if (isset($_POST['show'])) { ...logic... }

to receive your 'show' event.

Answer 2

<?php 

$parentNum = 0;

foreach($parents as $parent): ?>
        <div class='popup-screen' id = "popup">
          <div class = "spacing">
            Do you want to delete this data?
          </div>
            <a href="list_users.php?parentNum=<?php echo $parent[$parentNum]; ?>"> <input type="button" value="list_users.php?parentNum=<?php echo $parent[$parentNum]; ?>" class = "popup-button"> </a>
            <input type="button" value="CANCEL" class = "popup-button" onClick = "hide();">
        </div> 
        <tr class = "tr-1">
          <td onClick = "document.location = 'viewParent.php?parentNum=<?php echo $parent[$parentNum]; ?>';"><img src="../<?php echo $parent->image_path(); ?>" width="100" height = "100" class = "profile-pic"/></td>
          <td onClick = "document.location = 'viewParent.php?parentNum=<?php echo $parent[$parentNum]; ?>';">Parent</td>
          <td onClick = "document.location = 'viewParent.php?parentNum=<?php echo $parent[$parentNum]; ?>';"><?php echo $parent[$parentNum]->username; ?></td>
          <td onClick = "document.location = 'viewParent.php?parentNum=<?php echo $parent[$parentNum]; ?>';"><?php echo ucwords($parent[$parentNum]->firstName); ?></td>
          <td onClick = "document.location = 'viewParent.php?parentNum=<?php echo $parent[$parentNum]; ?>';"><?php echo ucwords($parent[$parentNum]->lastName); ?></td>
          <td onClick = "show();"><img src = "../stylesheets/images2/delete-icon.png" height="25" width="25" ></td>  
        </tr>
<?php 

$parentNum++;

endforeach; ?>