解决动态表格中按钮点击事件失效问题：ID重复与事件监听的最佳实践

<a href="#" id="declineB"><button class="btn btn-danger" style="width: 100%">Decline</button></a>

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

                                <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>"; ?> <a href="#" class="decline-button"><button class="btn btn-danger" style="width: 100%">Decline</button></a><?php echo "</td>";
                                            // ... 其他列 ...
                                            echo "</tr>";
                                    }
                                    ?>
                                </tbody>

// 获取所有具有 'decline-button' 类的元素
const declineButtons = Array.from(document.getElementsByClassName('decline-button'));

// 遍历每个按钮并添加点击事件监听器
declineButtons.forEach(buttonLink => {
    // 事件监听器应该绑定到<a>标签，而不是其内部的<button>
    // 因为原PHP代码中，id/class是加在<a>标签上的
    buttonLink.addEventListener('click', function(event) {
        event.preventDefault(); // 阻止<a>标签的默认跳转行为
        document.querySelector(".popup3").style.display = "flex";
    });
});

// 关闭弹窗的事件监听器可以保持不变，因为它通常只有一个关闭按钮
document.getElementById("closeDecB").addEventListener("click", function(){
    document.querySelector(".popup3").style.display = "none";
});

                                <tbody>
                                    <?php
                                    // ...
                                            echo "<td>"; ?> <a href="#" class="decline-button" data-user-id="<?php echo $row["id"]; ?>"><button class="btn btn-danger" style="width: 100%">Decline</button></a><?php echo "</td>";
                                    // ...
                                    ?>
                                </tbody>

// 获取表格的 tbody 元素
const tableBody = document.querySelector('tbody');

// 为 tbody 添加一个事件监听器
tableBody.addEventListener('click', function(event) {
    // 检查点击事件是否发生在具有 'decline-button' 类的<a>标签上
    const clickedLink = event.target.closest('.decline-button');

    if (clickedLink) {
        event.preventDefault(); // 阻止<a>标签的默认跳转行为
        document.querySelector(".popup3").style.display = "flex";

        // 如果需要获取特定行的数据，可以使用data-*属性
        const userId = clickedLink.dataset.userId;
        console.log('Decline button clicked for user ID:', userId);
        // 在这里可以根据 userId 执行后续操作，例如向后端发送请求
    }
});

// 关闭弹窗的事件监听器保持不变
document.getElementById("closeDecB").addEventListener("click", function(){
    document.querySelector(".popup3").style.display = "none";
});