Django模板循环渲染CSS翻转卡片时所有按钮仅触发首张卡片翻转

1. 修复HTML中ID重复问题 #

Django循环生成卡片时所有checkbox都使用了固定的id="card1"，对应label的for属性也全部指向card1，浏览器匹配重复ID时只会选中第一个元素，这是点击所有按钮都只翻转首张卡片的核心原因。
修改循环内的HTML代码，用Django模板自带的forloop.counter生成唯一ID即可：

<div class="wrapper">
    {% for project in projects %}
        <div class="card">
            <!-- 用forloop.counter生成唯一id -->
            <input type="checkbox" id="card{{ forloop.counter }}" class="more" aria-hidden="true">
            <div class="content">
                <div class="front"
                     style="background-image: url({{ project.image }})">
                    <div class="inner">
                        <h2>{{ project.title}}</h2>
                        <!-- label的for属性对应唯一id -->
                        <label for="card{{ forloop.counter }}" class="button" aria-hidden="true">
                            Details
                        </label>
                    </div>
                </div>
                <div class="back">
                    <div class="inner">
                        <div class="info">

                        </div>
                        <div class="description">
                            <p>{{ project.description }}</p>

                        </div>
                        <div class="location">Warsaw, Poland</div>
                        <div class="price">38€ / day</div>
                        <!-- 返回按钮的for属性也对应唯一id -->
                        <label for="card{{ forloop.counter }}" class="button return" aria-hidden="true">
                            <i class="fas fa-arrow-left"></i>
                        </label>
                    </div>
                </div>
            </div>
        </div>
    {% endfor %}

2. 移除冗余错误的JS代码 #

你当前的CSS已经内置了翻转逻辑：.more:checked ~ .content 会在checkbox勾选时自动触发翻转效果，不需要额外写JS控制。你现有的JS代码只选中了第一个卡片元素，反而会干扰正常交互，直接删除即可。
如果后续需要给卡片翻转添加额外逻辑，可以用事件委托统一绑定，不需要给每个元素单独加监听：

document.querySelector('.wrapper').addEventListener('change', function(e) {
    if (e.target.classList.contains('more')) {
        const currentCard = e.target.closest('.card');
        // 此处添加自定义逻辑，比如统计翻转次数、上报数据等
    }
});

3. 优化冗余CSS代码 #

你CSS中.front:after的background-image: url("{{ project.image }}")是无效代码：这部分CSS不在Django循环内，无法获取到project变量，而且你已经在front标签的行内样式设置了背景图，直接删除这行即可。

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