这段代码允许从两个不同的图像列表中显示图像。问题是，当点击任何一个带有frontid和backid的图像时，它们只显示第一个图像。我看到使用getElementByClassName（）作为一个选项，但我不知道如何去做。添加JavaScript来获取类名并生成数组会更容易吗？下面是代码：

<?php 
$query=mysqli_query($conn,"select * from upload WHERE status = 0")
or die(mysqli_error($conn));
        while($row=mysqli_fetch_array($query)){
        $id=$row['id'];
        $name=$row['name'];
        $name1=$row['name1'];
        $your_phone=$row['msisdn'];
        $customer_id=$row['customerid'];
        $date=$row['date'];
            ?>
        <tr>
            <td><?php echo $row['id'] ?></td>
            <td><?php echo $row['name'] ?></td>
         <td><?php echo $row['name1'] ?></td>
             <td><?php echo $row['msisdn'] ?></td>
             <td><?php echo $row['customerid'] ?></td>
             <td><?php echo $row['date'] ?></td>
            <td>
                <a data-toggle="modal" data-target="#myModal1">
            <img class="front-img" src="download.php?filename=<?php echo $name;?>"/>
            </a>
            </td>
            <td>
            <a data-toggle="modal" data-target="#myModal2">
        <img class="back-img" src="download.php?filename=<?php echo $name1;?>"/>
        </a>
        </td>
        <!-- Front ID Modal -->
        <div class="modal fade" id="myModal1" role="dialog">
            <div class="modal-dialog">
            <!-- Front ID Modal content-->
            <div class="modal-content">
        <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Front of ID</h4>
        </div>
        <div class="modal-body">
        <img id="front-img-modal" src="download.php?filename=<?php echo $name;?>"/>
            </div>
                <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                                </div>
                                            </div>
                                            
                                            </div>
                                        </div>
                                        <!-- Back ID Modal -->
                                        <div class="modal fade" id="myModal2" role="dialog">
            <div class="modal-dialog">          <!-- Back ID Modal content-->
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                <button type="button" class="close" data-dismiss="modal">&times;</button>
                                                <h4 class="modal-title">Back of ID</h4>
                                                </div>
                                                <div class="modal-body">
                                                    <img id="back-img-modal" src="download.php?filename=<?php echo $name1;?>"/>
                                                </div>
                                                <div class="modal-footer">
                                                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                                </div>
                                            </div>
                                            
                                            </div>
                                        </div>
                                        </div>```