bootstrap listgroup scrollspy not working, using jinja

I am working on a simple web-application with flask and am currently trying to dynamically create a scrollspy list group with jinja. In the code snippet the variable "choices" represents a list of lists of dictionaries. So the variable dict will be a list of dictionaries that populates the ids needed for the list group to work. For simplicity, I am testing it with choices containing only one list of dictionaries and loop.index to create the ids, but I was going to change that to uniquly generated ids later as choices will have more elements.

Unfortunately, the list group does not work properly. Any ideas as to what I'm doing wrong? The browser console throws me an error, "uncaught TypeError: i is null", relating to the bootstrap scrollspy.js. I was not able to trace it back and figure out what causes the error.

{% extends "layout.html" %}

{% block title %}
    Results
{% endblock %}

{% block main %}
<!--course display-->
{% for i in choices %}
<div class= "container-fluid">
    <div class="row justify-content-center">
      <div class="col-9 heading">
          <div>
            <h1>Coursera Courses</h1>
          </div>
      </div>
    </div>
    <div class="row justify-content-center result-background">
      <div id="list-example" class="col-2 list-group">
        {% for dict in i%}
        <a class="list-group-item list-group-item-dark list-group-item-action" href="#list-item-{{ loop.index }}">{{ dict["Course Name"] }}</a>
        {% endfor %}
      </div>
      <div class="col-7">
        <div class="scrollspy-example" data-bs-spy="scroll" data-bs-target="#list-example" data-bs-offset="40" tabindex="0">
          {% for dict in i %}
          <div class="boxlayout" id="#list-item-{{ loop.index }}">
            <img src="{{ dict["Image URL"] }}" alt="responsive webite" class="img-thumbnail" align="left" width="15%" height="15%">
              <h2>{{ dict["Course Name"] }}</h2>
              <details close>
              <summary>Lorem ipsum</summary>
              Lorem ipsum
              </details>
              </br>
              <table>
                <tr>
                  <td>Manufacturer</td><td> </td>
                <tr>
                  <td>Certificate</td><td>{{ dict["Certificate"] }}</td>
                </tr>
                <tr>
                  <td>Costs</td><td>${{ dict["Current Price"] }}</td>
                </tr>
                <tr>
                  <td><a href="{{ dict["URL"] }}"></a>Landing Page</td>
                </tr>
              </table>
          </div>
          {% endfor %}
        </div>
      </div>
  </div>
</div>
{% endfor %}

{% endblock %}

The CSS I use as per the Bootstrap requirements:

.scrollspy-example{
    position: relative;
    overflow-y: scroll;
    height: 300px;
}