Jinaj2 Modal Window not Working Upon Button Press for Data-Target

I have a button within a table in jinja template that looks like this:

{% for user in users %}
     <tr class="user_data" id="{{ user.uuid }}">
     <td><button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#{{ user.uuid }}_edit_user">Edit</button></td>
     </tr>
{% endfor %}

It is supposed to pop up the modal I have in the same html file but under another block:

{% block edit_modal %}
        {% for user in users %}
                <div class="modal fade" id="{{ user.uuid }}_edit_user" role="dialog">
                <div class="modal-dialog modal-lg">

                <!-- Modal content-->
                <div class="modal-content">
                <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Task Output</h4>
                </div>
                <div class="modal-body">
                <p>{{ user.username }}</p>
                </div>
                <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
                </div>

                </div>
                </div>
        {% endfor %}
{% endblock %}

This is what I came up from these two sources in stack overflow - so I hope you wont label this as duplicate since its not the same. Sources:

This is how I came up with the current template: Bootstrap Modal not appearing - jinja2

This is how I came up with surrounding it with block: Bootstrap modals not showing correctly when using Jinja templates

Backend checks:

1. Users is passed properly to the html file, "users":users_list
2. For some reason jquery-confirm works, but this isn't flexible because I want to create an edit modal.
3. I tried to import bootstrap to the base file, but the modals were showing but they are all over each other, and are unclosable.