Django with Bootstrap 2nd Modal (or subsequent modals) not working - django

Question

Using the Django for loop It am generating a paginated list from the database. This works. The generated list has a delete button to the right of each entry.
At the same page load I an using the the django for loop to generate individual Modal windows that match each delete button. So the button will call modal ID=### and there is a modal ### that matches. The HTML appears to render perfectly.
When I delete the TOP(First entry on the page) it works like a charm, I can do that all day long, with entries moving up and being deleted.
THE PROBLEM: When I choose a 2nd position or lower button the screen goes grey and freezes it needs a reload to respond again. This pattern is repeatable.
HTML:
{% load static %}
{% block content %}
<link rel="stylesheet" href="{% static "css/cabinet_table.css"%}">
<div class="col-lg-2">
</div>
<div class="col-lg-8">
<div class="table-responsive">
<table class="table table-hover">
<th colspan="3"style="text-align: center;"><h2>{{ user.username|capfirst }} Notes</h2></th>
{% for note in note_list %}
<tr>
<td >{{ note.title }}</td>
<td>{{ note.text|truncatewords:15 }}</td>
<td><button type="button" class="btn btn-info btn-success" data-toggle="modal" data-target="#deleteModal{{ note.id }}">Delete</button></td>
</tr>
{% endfor %}
</table>
</div>
<!-- Pagination below -->
{% if note_list.has_other_pages %}
<ul class="pagination">
{% if note_list.has_previous %}
<li>«</li>
{% else %}
<li class="disabled"><span>«</span></li>
{% endif %}
{% for i in note_list.paginator.page_range %}
{% if note_list.number == i %}
<li class="active"><span>{{ i }} <span class="sr-only">(current)</span></span></li>
{% else %}
<li>{{ i }}</li>
{% endif %}
{% endfor %}
{% if note_list.has_next %}
<li>»</li>
{% else %}
<li class="disabled"><span>»</span></li>
{% endif %}
</ul>
{% endif %}
</div>
<div class="col-lg-2">
</div>
{% include 'cabinet/_note_list_modal.html' %}
{% endblock %}
Included HTML(The modal generation):
{% for note in note_list %}
<!-- Modal {{ note.id }} -->
<div class="modal fade" id="deleteModal{{ note.id }}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel{{ note.id }}">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel{{ note.id }}">Delete Note</h4>
</div>
<div class="modal-body">
<h4>Title :</h4> {{ note.title }}<br>
<h4>Idea:</h4> {{ note.text|truncatewords:25 }}
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-danger" onclick="settleUp{{ note.id }}()" >Delete</button>
</div>
</div>
</div>
</div>
<div id="hiddenForm{{ note.id }}" style="display: none" class="visibility=hidden">
<form class="" action="/fc/delete/{{ note.id }}" name="hiddenForm{{ note.id }}" method="post">
{% csrf_token %}
<input type="hidden" name="deleteNote{{ note.id }}" id="deleteNote{{ note.id }}" value="{{ note.id }}">
<!-- <button type="submit" name="betBalance">Update Balance</button> -->
</form>
<script type="text/javascript">
function settleUp{{ note.id }}(){
document.forms.hiddenForm{{ note.id }}.submit()
}
</script>
{% endfor %}
OBJECTIVE: Click on any delete button have its modal pop up and work.
Thanks for any help.
PS using inspect, which I don't know how to use well, I see no errors in the console.

Answer 1

The problem with this, which was solved in another question, is there is a missing DIV tag. Thanks for everyone who looked.