我在模板中使用 bootstrap 折叠元素，但问题是当我点击任何项目时，它会展开所有项目。当我在 html 元素中添加 pk 时，它不会扩展。这是我的代码：

html：

import 'package:http/http.dart' as http;
import 'package:http_retry/http_retry.dart';

final client = RetryClient(
   http.Client(),retries: 1,when: (response) {
    return response.statusCode == 401 ? true : false;
   },onRetry: (req,res,retryCount) {
     if (retryCount == 0 && res?.statusCode == 401) {
        // refresh token
     }  
   },);

try {
  final response = await client.get('http://www.example.com');
} finally {
  client.close();
}

models.py

  {% for i in contact%} 
    <p>
   
      <button class="btn btn-primary" type="button" data-toggle="collapse" data-target=".multi-collapse{{i.pk}}" aria-expanded="false" aria-controls="multiCollapseExample1{{i.pk}} multiCollapseExample2">Your Ticket Status</button>
    </p>
    <div class="row">
      <div class="col">
        <div class="collapse multi-collapse" id="multiCollapseExample1{{i.pk}}">
          <div class="card card-body">
           {{i.message}} my replay.{{i.id}}
          </div>
        </div>
      </div>
      <div class="col">
        <div class="collapse multi-collapse" id="multiCollapseExample2{{i.pk}}">
          <div class="card card-body">
            admin replay
          </div>
          <textarea class="form-control" name="message" id="exampleFormControlTextarea1" rows="3" placeholder="write details about your project"></textarea><br>
          
          <button type="submit" class="btn btn-primary">Submit</button>
        </div>
      </div>
      
    </div>
  {%endfor%}

我在 html 元素中看到主键