Bootstrap Modal not appearing - jinja2

I'm the thousandth person to ask a similar question, so I'm certain it's something simple.

First time working with boostrap / jinja in Chrome. Simply put, the button is there, but clicking it does nothing. The data is all populating from Jinja just fine, and the jinja is rendering out the for loops properly, with matching id's between target calls and div id's.

**EDIT: After following the suggestion of looking at this URL: https://getbootstrap.com/docs/5.0/components/modal/#usage and cutting and pasting the sample "live demo" that isn't working either. Could be something environmental I'm missing?

<!DOCTYPE html>
<html lang="en">

<html>
  <head>
  </head>
  <body>
    {% block content %}
      <table>
        <tr>
          <td>
            {% for loc, content in variant.location.items() %}
            {% set modal_id = day.header + item_name +variant.variant_name %}
            <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#{{modal_id}}">{{ loc }} : {{ content.quantity }}</button>
            {% endfor %}
          </td>
        </tr>
      </table>
    {% endblock %}
  </body>

  {%block modals%}
    {% for loc, content in variant.location.items() %}
      {% set modal_id = day.header + item_name + variant.variant_name %}

      <!-- Modal -->
      <div id="{{ modal_id }}" class="modal fade" role="dialog" style="z-index: 10000000">                
        <div class="modal-dialog">
          <div classs="modal-content">
            <div class="modal-header">
            </div>
            <div class="modal-body">
              <p>STUFF</p>
            </div>
          </div>
        </div>
      </div> 
    {% endfor %}
  {%endblock%}
</html>