在表格按钮内单击时不会出现弹出窗口

Question

Can anyone suggest some alternative solution for this problem.

I've made a popup form which i use css and javascript to trigger the display to none or flex every time i click into a specific button which is great. But this method seems to not work on a table as you can see below i've done a simple query which i just fetch some of the essentials and included some buttons to use to trigger the popup form.

PHP/HTML CODE

                                <tbody>
                                    <?php
                                    $res=mysqli_query($link,"SELECT CONCAT(c.firstname, ' ', c.lastname) AS fullname, c.* FROM user_registration c");
                                    while($row=mysqli_fetch_array($res))
                                    {
                                            echo "<tr>";
                                            echo "<td>"; echo $row["id"]; echo "</td>";
                                            echo "<td>"; ?> <img src="<?php echo $row["image"]; ?>" height="100" width="100"> <?php echo "</td>";
                                            echo "<td>"; echo $row["fullname"]; echo "</td>";
                                            echo "<td>"; echo $row["username"]; echo "</td>";
                                            echo "<td>"; echo $row["id"]; echo "</td>";
                                            echo "<td>"; echo $row["id"]; echo "</td>";
                                            echo "<td>"; echo $row["id"]; echo "</td>";
                                            echo "<td>"; echo $row["id"]; echo "</td>";
                                            echo "<td>"; ?> <a href="#"><button class="btn btn-success" style="width: 100%">Accept</button></a><?php echo "</td>";
                                            echo "<td>"; ?> <a href="#" id="declineB"><button class="btn btn-danger" style="width: 100%">Decline</button></a><?php echo "</td>";
                                            echo "<td>"; ?> <a href="#"><button class="btn btn-success" style="width: 100%">View Message</button></a><?php echo "</td>";
                                            echo "</tr>";
                                    }
                                    ?> 
                                </tbody>

JAVASCRIPT CODE

document.getElementById("declineB").addEventListener("click", function(){
              document.querySelector(".popup3").style.display = "flex";
          })
          
          document.getElementById("closeDecB").addEventListener("click", function(){
              document.querySelector(".popup3").style.display = "none";
          })

Answer 1

When you have multiple elements with id declineB , document.getElementById("declineB") can actually only get the first element with id declineB . The effect you want will only appear when an element whose id is declineB . When click others, no click event will be triggered.