Bootstrap 无论单击哪一行，模式都显示第一条记录

Bootstrap Modal is showing the first record regardless of what row is clicked

我有一个 table 显示记录并制作了两个用于编辑和删除的按钮。单击 bootstrap 模式正在打开，但无论单击哪一行，它都会显示第一条记录。

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
    href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script
    src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script
    src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

    <h1>User Categories</h1>
    <div class="table-responsive text-nowrap">
        <table class="table table-striped table-hover table-fixed">
            <thead>
                <tr class="bg-info text-white">
                    <th scope="col" class="text-center">ID</th>
                    <th scope="col" class="text-center">Category</th>
                    <th scope="col" class="text-center">Edit</th>
                    <th scope="col" class="text-center">Delete</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="text-center">25</td>
                    <td>Hello</td>
                    <td class="text-center"><a href="#" data-toggle="modal"
                        data-target="#primary"><button class="font-awesome-btn">
                                <i class="fa fa-edit" aria-hidden="true"></i> Edit
                            </button></a> <!-- The Modal -->
                        <div class="modal fade" id="primary" tabindex="-1" role="dialog"
                            aria-labelledby="myModalLabel" aria-hidden="true">
                            <div class="modal-dialog" backdrop="static" keyboard="false">
                                <div class="modal-content">

                                    <!-- Modal Header -->
                                    <div class="modal-header modal-header-primary">
                                        <button type="button" class="close order-1"
                                            data-dismiss="modal" aria-label="Close">
                                            <span aria-hidden="true">×</span>
                                        </button>
                                        <h4>
                                            <i class="fa fa-edit" aria-hidden="true"></i> Updating
                                            Category
                                        </h4>
                                    </div>
                                    <div class="modal-body">
                                        <!-- Modal body -->
                                        <h3>Please write new value for:</h3>
                                        <span class=red>Hello</span>
                                        <form action="/parvaz.aero/editCategory" method="post">
                                            <input type="hidden" name="categoryId" value="25"><input
                                                type="text" name="category" value="">
                                            <div>
                                                <!-- Modal footer -->
                                                <div class="modal-footer">
                                                    <button class="font-awesome-btn">
                                                        <i class="fa fa-save" aria-hidden="true"></i> Save Changes
                                                    </button>
                                        </form>
                                        <button type="button" class="font-awesome-btn"
                                            data-dismiss="modal">
                                            <i class="fa fa-times" aria-hidden="true"></i> Close
                                        </button>
                                    </div>

                                </div>
                                <!-- /.modal-content -->
                            </div>
                            <!-- /.modal-dialog -->
                        </div>
                        <!-- /.modal --></td>
                    <td class="text-center"><a href="#" data-toggle="modal"
                        data-target="#danger"><button class="font-awesome-btn">
                                <i class="fa fa-trash" aria-hidden="true"></i> Delete
                            </button></a> <!-- The Modal -->
                        <div class="modal fade" id="danger" tabindex="-1" role="dialog"
                            aria-labelledby="myModalLabel" aria-hidden="true">
                            <div class="modal-dialog" backdrop="static" keyboard="false">
                                <div class="modal-content">

                                    <!-- Modal Header -->
                                    <div class="modal-header modal-header-danger">
                                        <button type="button" class="close order-1"
                                            data-dismiss="modal" aria-label="Close">
                                            <span aria-hidden="true">×</span>
                                        </button>
                                        <h4>
                                            <i class="fa fa-check-circle" aria-hidden="true"></i> Are you
                                            sure you want to delete
                                        </h4>
                                    </div>
                                    <div class="modal-body">
                                        <!-- Modal body -->
                                        <form action="/parvaz.aero/deleteCategory" method="post">
                                            <input type="hidden" name="categoryId" value="25">
                                            <div>
                                                <!-- Modal footer -->
                                                <div class="modal-footer">
                                                    <button class="font-awesome-btn">
                                                        <i class="fa fa-check-circle" aria-hidden="true"></i> Yes
                                                    </button>
                                        </form>
                                        <button type="button" class="font-awesome-btn"
                                            data-dismiss="modal">
                                            <i class="fa fa-times" aria-hidden="true"></i> No
                                        </button>
                                    </div>

                                </div>
                                <!-- /.modal-content -->
                            </div>
                            <!-- /.modal-dialog -->
                        </div>
                        <!-- /.modal --></td>
                </tr>
                <tr>
                    <td class="text-center">24</td>
                    <td>Testing</td>
                    <td class="text-center"><a href="#" data-toggle="modal"
                        data-target="#primary"><button class="font-awesome-btn">
                                <i class="fa fa-edit" aria-hidden="true"></i> Edit
                            </button></a> <!-- The Modal -->
                        <div class="modal fade" id="primary" tabindex="-1" role="dialog"
                            aria-labelledby="myModalLabel" aria-hidden="true">
                            <div class="modal-dialog" backdrop="static" keyboard="false">
                                <div class="modal-content">

                                    <!-- Modal Header -->
                                    <div class="modal-header modal-header-primary">
                                        <button type="button" class="close order-1"
                                            data-dismiss="modal" aria-label="Close">
                                            <span aria-hidden="true">×</span>
                                        </button>
                                        <h4>
                                            <i class="fa fa-edit" aria-hidden="true"></i> Updating
                                            Category
                                        </h4>
                                    </div>
                                    <div class="modal-body">
                                        <!-- Modal body -->
                                        <h3>Please write new value for:</h3>
                                        <span class=red>Testing</span>
                                        <form action="/parvaz.aero/editCategory" method="post">
                                            <input type="hidden" name="categoryId" value="24"><input
                                                type="text" name="category" value="">
                                            <div>
                                                <!-- Modal footer -->
                                                <div class="modal-footer">
                                                    <button class="font-awesome-btn">
                                                        <i class="fa fa-save" aria-hidden="true"></i> Save Changes
                                                    </button>
                                        </form>
                                        <button type="button" class="font-awesome-btn"
                                            data-dismiss="modal">
                                            <i class="fa fa-times" aria-hidden="true"></i> Close
                                        </button>
                                    </div>

                                </div>
                                <!-- /.modal-content -->
                            </div>
                            <!-- /.modal-dialog -->
                        </div>
                        <!-- /.modal --></td>
                    <td class="text-center"><a href="#" data-toggle="modal"
                        data-target="#danger"><button class="font-awesome-btn">
                                <i class="fa fa-trash" aria-hidden="true"></i> Delete
                            </button></a> <!-- The Modal -->
                        <div class="modal fade" id="danger" tabindex="-1" role="dialog"
                            aria-labelledby="myModalLabel" aria-hidden="true">
                            <div class="modal-dialog" backdrop="static" keyboard="false">
                                <div class="modal-content">

                                    <!-- Modal Header -->
                                    <div class="modal-header modal-header-danger">
                                        <button type="button" class="close order-1"
                                            data-dismiss="modal" aria-label="Close">
                                            <span aria-hidden="true">×</span>
                                        </button>
                                        <h4>
                                            <i class="fa fa-check-circle" aria-hidden="true"></i> Are you
                                            sure you want to delete
                                        </h4>
                                    </div>
                                    <div class="modal-body">
                                        <!-- Modal body -->
                                        <form action="/parvaz.aero/deleteCategory" method="post">
                                            <input type="hidden" name="categoryId" value="24">
                                            <div>
                                                <!-- Modal footer -->
                                                <div class="modal-footer">
                                                    <button class="font-awesome-btn">
                                                        <i class="fa fa-check-circle" aria-hidden="true"></i> Yes
                                                    </button>
                                        </form>
                                        <button type="button" class="font-awesome-btn"
                                            data-dismiss="modal">
                                            <i class="fa fa-times" aria-hidden="true"></i> No
                                        </button>
                                    </div>

                                </div>
                                <!-- /.modal-content -->
                            </div>
                            <!-- /.modal-dialog -->
                        </div>
                        <!-- /.modal --></td>
                </tr>
            </tbody>
        </table>
    </div>
    <br>
    <br>
    </main>
</body>
</html>

请检查我的代码 [JSFiddle][1]

我无法修复它。请指教

此致 [1]: https://jsfiddle.net/Raakh5/2zrukcwj/4/

问题是 data-target="#primary" 和 id="primary"。这些值必须是唯一的，并且必须针对每条记录进行更改