用于在弹出窗口中显示和更新相应行数据的按钮

Question

我有一个表格，用于显示数据库中的数据。我试图在每行的末尾创建一个按钮，生成一个弹出 行的信息。目前，每一行上的按钮都会生成一个仅包含第一行信息的弹出窗口。我怎样才能做到这一点？此外，弹出窗口将用作更新该行对应值的表单，如何确保更新的值与该行中的相应值组合？

代码部分如下：

<script>
        //Function To Display Popup
        function div_show() {
            document.getElementById('abc').style.display = "block";
        }
        //Function to Hide Popup
        function div_hide() {
            document.getElementById('abc').style.display = "none";
        }
    </script>


    <c:forEach var="task" items="${listTasks.rows}">

                                <tr>
                                    <td><c:out value="${task.taskid}" /></td>
                                    <td><c:out value="${task.dept}" /></td>
                                    <td><c:out value="${task.empid}" /></td>
                                    <td><c:out value="${task.empname}" /></td>
                                    <td><c:out value="${task.status}" /></td>
                                    <td><div id="abc">
                                            <div id="popupContact">
                                                <form action="/OnboardingIbos/mytasks" id="form"
                                                    class="status" method="post" name="form">
                                                    <h3 align="center">Approve Request</h3>
                                                    <table width=100% cellspacing="10">
                                                        <tr>
                                                            <th>Task ID</th>
                                                            <td><c:out value="${task.taskid}" /></td>
                                                        </tr>
                                                        <tr>
                                                            <th>Department</th>
                                                            <td><c:out value="${task.dept}" /></td>
                                                        </tr>
                                                        <tr>
                                                            <th>Employee ID</th>
                                                            <td><c:out value="${task.empid}" /></td>
                                                        </tr>
                                                        <tr>
                                                            <th>Employee Name</th>
                                                            <td><c:out value="${task.empname}" /></td>
                                                        </tr>

                                                    </table>
                                                    <hr>
                                                    <table align="center" cellspacing="20">
                                                        <tr>
                                                            <td><input id="approve" name="approve"
                                                                class="submit-button" type="submit" value="Approve"></td>
                                                            <td><input id="reset" name="reset"
                                                                class="submit-button" onclick="div_hide()" type="button"
                                                                value="Cancel"></td>
                                                        </tr>
                                                    </table>
                                                    <input type="hidden" name="${_csrf.parameterName}"
                                                        value="${_csrf.token}" />
                                                </form>

                                            </div>
                                        </div>
                                        <button id="popup" onclick="div_show()" class="any-button">Details</button></td>
                                </tr>
                            </c:forEach>