PHP foreach循环中为Bootstrap Modal分配唯一id的实现问题

当前所有模态框ID完全重复，本质是两个逻辑bug叠加导致的：

• 把计数器初始化语句$num = 5;写在了foreach循环体内部，每一次循环都会把$num重置为初始值5，后续的$num++永远只在当前迭代内生效，根本留不到下一次循环，最终所有循环生成的模态框ID都是approve5
• 浏览器解析DOM时，如果遇到多个相同id的元素，会默认匹配文档里第一个出现的同名元素，所以不管点哪个按钮，都会触发第一个加载出来的approve5模态框，展示第一条数据
• 代码中虽然获取了接口返回的唯一主键$row['id']，但全程没有用到，浪费了天然的唯一标识。同时附带存在HTML语法错误：卡片容器的div标签缺闭合尖括号、img和a标签的属性没加引号、a标签结构缺闭合尖括号，这些也会导致页面渲染错位

1. 优先用接口返回的$row['id']作为唯一标识，替代手动维护的自增计数器，从根源避免ID重复
2. 所有依赖ID关联的DOM属性，同步带上唯一后缀，保证全页面DOM ID无冲突
3. 补全缺失的HTML标签语法，修正结构错误

foreach ($goals as $row) {
    $title = $row['title'];
    $description = $row['description'];
    $url_cover = $row['url_cover'];
    $url_info = $row['url_info'];
    // 基于接口返回的唯一主键生成模态框专属id，彻底避免重复
    $modal_unique_id = 'approve-' . $row['id'];
    echo "
    <div class='card'>
        <div class='card bg-dark text-white'>
            <img src='{$url_cover}' class='card-img' alt=''>
            <div class='card-img-overlay'>
                <h5 class='card-title'>{$title}</h5>
                <!-- 触发按钮的target与模态框id保持严格一致 -->
                <button type='button' class='btn btn-dark' data-toggle='modal' data-target='#{$modal_unique_id}'>
                    +
                </button>
            </div>
        </div> 
        
        
        <div class='modal fade' id='{$modal_unique_id}' tabindex='-1' role='dialog' aria-labelledby='modalTitle-{$modal_unique_id}' aria-hidden='true'>
            <div class='modal-dialog' role='document'>
                <div class='modal-content'>
                    <div class='modal-header'>
                        <h5 class='modal-title' id='modalTitle-{$modal_unique_id}'>{$description}</h5>
                        <button type='button' class='close' data-dismiss='modal' aria-label='Close'>
                            <span aria-hidden='true'>&times;</span>
                        </button>
                    </div>
                    <div class='modal-body'>
                        <p>
                            <a href='{$url_info}'>
                                <img src='{$url_info}' title='source: imgur.com'/>
                            </a>
                        </p>
                    </div>
                    <div class='modal-footer'>
                        <button type='button' class='btn btn-secondary' data-dismiss='modal'>Close</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    ";
}

• 循环渲染DOM时，所有带id属性的元素必须保证全局唯一，哪怕是模态框内部的标题id，重复之后也会触发浏览器的默认解析异常
• 尽量不要依赖手动计数生成唯一id，接口返回的记录主键是最稳定、不会冲突的标识，哪怕后续列表排序、删改条目，也不会出现id匹配错位
• 写HTML输出的时候，所有标签属性值都要加引号，避免URL带特殊字符的时候冲掉属性结构

内容的提问来源于stack exchange，提问作者Murfs