Modal Popup with dynamic IDs - php

Question

Here is my code
$sql = "select * from billbook where stcode =? and sem =?";
$query = $mysqli->prepare($sql);
$query->bind_param('si',$stcode, $sem);
$query->execute();
$query->store_result();
$query->bind_result($billno,$billdate,$stcode,$sem,$amount);
$x = 1;
while($query->fetch())
{
?>
<tr>
<td align='center'><?php echo $x ?></td>
<td align='center' id="bno"><?php echo $billno ?></td>
<td align='center'><?php echo $billdate?></td>
<td align='right'><?php echo $amount?>.00</td>
</tr>
<?php
}
?>
My aim is to show the details of the Bill Number in a Modal Dialog Popup in Bootstrap, when the user click the "bno" ID (Second Column), after processing the details in an external PHP file.
Please Help.

Answer 1

<td align="center" id="bno"><?= $billno ?></td>
<?php
// generate a modal per bill
$modals[] = array(
'billno' => $billno,
'modal_id' => 'billno-'.$billno,
'title' => 'Bill No. '.$billno,
'message' => 'Modal body here',
'dismiss_button_text' => 'Close'
);
?>
...
<?php foreach ($modals as $modal) : ?>
<!-- Modal -->
<div class="modal fade" id="billno-<?= $modal['billno'] ?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title"><?= $modal['title'] ?></h4>
</div>
<div class="modal-body">
<p><?= $modal['message'] ?></p>
</div>
<div class="modal-footer">
<div class="form-group">
<button type="button" class="btn btn-success form-control" data-dismiss="modal"><?= $modal['dismiss_button_text'] ?></button>
</div>
</div>
</div>
</div>
</div>
<?php endforeach; ?>