Having encountered an issue with a popup trigger placed inside a td element, I am seeking advice on how to pass table data into the popup window. Unfortunately, the main popup window was positioned outside the while loop, resulting in multiple instances of the popup window appearing instead of just one. How can I efficiently transfer the table results to the popup without facing this replication problem?
$result = mysqli_query($conn, $sql);
while ($row = mysqli_fetch_assoc($result)) {
// Loop through the table results and perform necessary actions
?>
<td>
<a href="#0" id="info" class="info popup-trigger"
title="info">View</a>
</td>
<td style="font-size:16px;"><STRONG><?php echo $row['eqdesc'];
$eqid=$row['eq_inv_id'];?>
</STRONG></td>
<td><?php echo $row['eq_inv_id']; ?></td>
<td style="color:red; font-size:15px;"><strong><a href="timeline.php?
emp_no=<?php echo
$row['empl_no'];?>" style="color:inherit;"><?php echo
$row['empl_firstname']; ?></a></strong>
</td>
<td style="color:red; font-size:15px;"><strong><a href="timeline.php?
emp_no=<?php echo
$row['empl_no'];?>" style="color:inherit;"><?php echo
$row['middlename']; ?></a></strong>
</td>
<td style="color:red; font-size:15px;"><strong><a href="timeline.php?
emp_no=<?php echo
$row['empl_no'];?>" style="color:inherit;"><?php echo
$row['empl_lastname']; ?></a>
</strong></td>
<td><?php echo $row['brand']; ?></td>
<td><?php echo $row['serial_no']; ?></td>
<td><?php echo $row['eq_state']; ?></td>
<td><?php echo $row['eq_condition']; ?></td>
<td><?php echo $row['curr_equip_loc']; ?></td>
</tbody>
<?php
}
?>
</table>
</div>
<div id="#0" class="popup" role="alert">
<div class="popup-container">
<a href="#0" class="popup-close img-replace">Close</a>
<h2 class="modal-heading">EQUIPMENT INFORMATION</h2>
<label>EMPL. NO.:<strong><?php echo $row['eq_inv_id'];?></strong>
</label><br>
<label>FIRST NAME:</label><br>
<label>MIDDLE NAME:</label><br>
<label>LAST NAME:</label><br>
<label>EQ DESCRIPTION:</label><br>
<label>DESCRIPTION:</label><br>
<label>BRAND:</label><br>
<label>TAG NO.:</label><br>
<label>SERIAL NO.:</label><br>
<label>MODEL NO:</label><br>
<label>IP ADDRESS:</label><br>
<label>DATE ISSUED:</label><br>
<label>EQ STATE:</label><br>
<label>EQ CONDITION:</label><br>
<label>DATE PURCHASED:</label><br>
<label>AGE:</label><br><BR>
<label>PRICE:</label><br>
<label>LOCATION:</label><br>
<label>REMARKS:</label><br>
<label>PAR NO.:</label><br><BR>
<button class="">UPDATE</button>
<button class="">Assign this equipment to an employee</button>
<button class="">EQ HISTORY</button>
</div>
</div>
<script>
jQuery(document).ready(function($){
//open popup
$('.popup-trigger').on('click', function(event){
event.preventDefault();
$('.popup').addClass('is-visible');
});
//close popup
$('.popup').on('click', function(event){
if( $(event.target).is('.popup-close') || $(event.target).is('.popup')
) {
event.preventDefault();
$(this).removeClass('is-visible');
}
});
//close popup when clicking the esc keyboard button
$(document).keyup(function(event){
if(event.which=='27'){
$('.popup').removeClass('is-visible');
}
});
});
</script>
https://i.sstatic.net/yvNTJ.png https://i.sstatic.net/aepjb.png