PHP+HTML模态框加载数据库数据问题：始终显示最后一条记录

通过PHP从数据库获取$folders数据集，用foreach循环遍历生成带编辑按钮的卡片，点击按钮打开Bootstrap模态框时，所有按钮都只显示最后一条记录的内容。尝试过新页面实现成功，但想在当前页面（用$_SERVER['PHP_SELF']）完成却失败。

用户原代码：

<div class="main-slide">
    <div class="gallery">
                    
        <?php
        foreach($folders as $folder) {
                        
            echo '<div class="x-gallery text-center">';
            ?>
            <!-- Start option Span -->
            <span >
                <a href="#&foldid=<?php echo $folder['Folder_ID']?>">
                            
            <!-- Button trigger modal -->
            <button type="button" class="btn btn-light" name="editFolder" data-bs-toggle="modal" 
                    data-bs-target="#exampleModalOption">
                <i class='fa-solid fa-pen-to-square'></i>
            </button>
        
            <!-- Modal -->
            <div class="modal fade" id="exampleModalOption" tabindex="-1" 
                aria-labelledby="exampleModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="exampleModalLabel">Options </h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal" 
                                    aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                        <div class="container">

                            <form class="form-horizontal main-form" 
                            action="<?php echo $_SERVER['PHP_SELF'] ; ?>" 
                            method="POST" enctype="multipart/form-data">

                                <!-- ID Input Hidden -->
                                <input type="hidden" name="foldid" 
                                   value="<?php echo $folder['Folder_ID']?>"> 
                                <!--  User Name field -->
                                <div class="mb-3 row col-mid-4">
                                <label class="col-sm-2 col-form-label">Folder Name</label>
                                    <div class="col-sm-10 col-md-10">
                                        <div class="form-group">
                                            <input 
                                                type="text" 
                                                name="name" 
                                                class="form-control"
                                                value ="<?php echo $folder['Folder_Name'] ?>" 
                                                autocomplete="off"
                                                required="required"
                                                />
                                            </div>
                                        </div>
                                    </div>
                                    <!-- Button -->
                                    <div class="mb-3 row">
                                    <div class="d-grid gap-2 col-8 md-flex justify-content-md-end">
                                        <input type="submit" name="editFolder" value="Save" 
                                            class="btn btn-primary " />
                                    </div>
                                </div>
                            </form>
                                               
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </a>
</span>
<!-- End Option Span -->

    <?php
    echo "<span class=''>".$folder['Folder_Name']."</span>";
    if(empty($folder['Folder_Cover'])) {
        
        echo "<a href='#'>
        <img class='card-img-top' src='images/no-image.jpg' alt='empty'>
        </a> ";
    }else {
        
        echo "<a href='#'>
                <img class='card-img-top' 
                    src='data/uploads/album-Images/".$folder['Folder_Cover']."' alt=''>
            </a> ";
    }
                        
                        echo"</div>";
                    }
                    
                    ?>
            </div>
</div>

HTML中元素的id必须唯一，你在循环里给所有模态框都用了同一个id="exampleModalOption"，浏览器只会识别最后一个拥有该ID的元素，所以不管点击哪个按钮，都会打开最后生成的那个模态框。

方案1：给每个模态框生成唯一ID #

循环时把文件夹ID拼到模态框的ID上，按钮的data-bs-target也对应这个唯一ID：

<div class="main-slide">
    <div class="gallery">
        <?php
        foreach($folders as $folder) {
            // 生成唯一模态框ID
            $modalId = "exampleModalOption-" . $folder['Folder_ID'];
            echo '<div class="x-gallery text-center">';
            ?>
            <!-- Start option Span -->
            <span >
                <!-- 按钮的data-bs-target指向唯一模态框ID -->
                <button type="button" class="btn btn-light" name="editFolder" data-bs-toggle="modal" 
                        data-bs-target="#<?php echo $modalId; ?>">
                    <i class='fa-solid fa-pen-to-square'></i>
                </button>
        
                <!-- 模态框使用唯一ID -->
                <div class="modal fade" id="<?php echo $modalId; ?>" tabindex="-1" 
                    aria-labelledby="exampleModalLabel-<?php echo $folder['Folder_ID']; ?>" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="exampleModalLabel-<?php echo $folder['Folder_ID']; ?>">Options </h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal" 
                                        aria-label="Close"></button>
                            </div>
                            <div class="modal-body">
                            <div class="container">
                                <form class="form-horizontal main-form" 
                                action="<?php echo $_SERVER['PHP_SELF'] ; ?>" 
                                method="POST" enctype="multipart/form-data">
                                    <!-- ID Input Hidden -->
                                    <input type="hidden" name="foldid" 
                                       value="<?php echo $folder['Folder_ID']?>"> 
                                    <!--  User Name field -->
                                    <div class="mb-3 row col-mid-4">
                                    <label class="col-sm-2 col-form-label">Folder Name</label>
                                        <div class="col-sm-10 col-md-10">
                                            <div class="form-group">
                                                <input 
                                                    type="text" 
                                                    name="name" 
                                                    class="form-control"
                                                    value ="<?php echo $folder['Folder_Name'] ?>" 
                                                    autocomplete="off"
                                                    required="required"
                                                    />
                                                </div>
                                            </div>
                                        </div>
                                        <!-- Button -->
                                        <div class="mb-3 row">
                                        <div class="d-grid gap-2 col-8 md-flex justify-content-md-end">
                                            <input type="submit" name="editFolder" value="Save" 
                                                class="btn btn-primary " />
                                        </div>
                                    </div>
                                </form>
                                                   
                            </div>
                        </div>
                    </div>
                </div>
            </span>
            <!-- End Option Span -->

            <?php
            echo "<span class=''>".$folder['Folder_Name']."</span>";
            if(empty($folder['Folder_Cover'])) {
                echo "<a href='#'>
                <img class='card-img-top' src='images/no-image.jpg' alt='empty'>
                </a> ";
            }else {
                echo "<a href='#'>
                        <img class='card-img-top' 
                            src='data/uploads/album-Images/".$folder['Folder_Cover']."' alt=''>
                    </a> ";
            }
            echo"</div>";
        }
        ?>
    </div>
</div>

方案2：单个模态框+动态填充数据（推荐） #

只生成一个模态框，通过JavaScript在点击按钮时把对应文件夹的数据填充进去，减少HTML冗余：

HTML部分 #

<div class="main-slide">
    <div class="gallery">
        <?php
        foreach($folders as $folder) {
            echo '<div class="x-gallery text-center">';
            ?>
            <!-- Start option Span -->
            <span >
                <!-- 按钮添加自定义属性存储文件夹数据 -->
                <button type="button" class="btn btn-light edit-folder-btn" 
                        data-bs-toggle="modal" data-bs-target="#exampleModalOption"
                        data-folder-id="<?php echo $folder['Folder_ID']; ?>"
                        data-folder-name="<?php echo htmlspecialchars($folder['Folder_Name']); ?>">
                    <i class='fa-solid fa-pen-to-square'></i>
                </button>
            </span>
            <!-- End Option Span -->

            <?php
            echo "<span class=''>".$folder['Folder_Name']."</span>";
            if(empty($folder['Folder_Cover'])) {
                echo "<a href='#'>
                <img class='card-img-top' src='images/no-image.jpg' alt='empty'>
                </a> ";
            }else {
                echo "<a href='#'>
                        <img class='card-img-top' 
                            src='data/uploads/album-Images/".$folder['Folder_Cover']."' alt=''>
                    </a> ";
            }
            echo"</div>";
        }
        ?>
    </div>
</div>

<!-- 单个模态框，放在循环外 -->
<div class="modal fade" id="exampleModalOption" tabindex="-1" 
    aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Options </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" 
                        aria-label="Close"></button>
            </div>
            <div class="modal-body">
            <div class="container">
                <form class="form-horizontal main-form" 
                action="<?php echo $_SERVER['PHP_SELF'] ; ?>" 
                method="POST" enctype="multipart/form-data">
                    <!-- 用于存储选中的文件夹ID -->
                    <input type="hidden" name="foldid" id="modal-foldid"> 
                    <!-- 文件夹名称输入框 -->
                    <div class="mb-3 row col-mid-4">
                    <label class="col-sm-2 col-form-label">Folder Name</label>
                        <div class="col-sm-10 col-md-10">
                            <div class="form-group">
                                <input 
                                    type="text" 
                                    name="name" 
                                    class="form-control"
                                    id="modal-folder-name"
                                    autocomplete="off"
                                    required="required"
                                    />
                                </div>
                            </div>
                        </div>
                        <!-- 提交按钮 -->
                        <div class="mb-3 row">
                        <div class="d-grid gap-2 col-8 md-flex justify-content-md-end">
                            <input type="submit" name="editFolder" value="Save" 
                                class="btn btn-primary " />
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

JavaScript部分 #

// 监听所有编辑按钮的点击事件
document.querySelectorAll('.edit-folder-btn').forEach(btn => {
    btn.addEventListener('click', function() {
        // 获取按钮上存储的文件夹数据
        const folderId = this.getAttribute('data-folder-id');
        const folderName = this.getAttribute('data-folder-name');
        
        // 填充到模态框的表单中
        document.getElementById('modal-foldid').value = folderId;
        document.getElementById('modal-folder-name').value = folderName;
    });
});

内容的提问来源于stack exchange，提问作者A-Saleh-86