multi modals bootstrap in for loop django - django

Question

I have a for loop on my html code to display a list of data, when I made a Bootstrap Modal in this loop to display it for each element of the list. It seems that the modal work only for the first element of the list.
{% for i in lb %}
<button class="btn" id="myBtn" title="Ajouter Serveur" style="padding-bottom:1px" data-target="#myModal"><a class="icon-plus-sign" title="Ajouter Serveur"></a></button>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Ajouter Serveur</h4>
</div>
<div class="modal-body">
<form method="post" class="loginForm">
<input type="hidden" name="lb" value="{{ i.Nom }}">
<h6>{% csrf_token %}
{{ form.as_table }}</h6>
<input type="submit" name="submit" class="btn btn-primary " value="Submit" />
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div></div>
{% endfor %}

Answer 1

The id value of the button and <div class="modal"> have to be unique in the document.
Try adding a unique value to the id, ie:
<div class="span12">
{% for i in lb %}
<div id="Person-1" class="box">
<div class="box-header">
<div class="span10">
<i class="icon-hdd icon-large"></i>
<h5>{{i.Nom}}</h5></div>
<button class="btn" id="myBtn{{i.id}}" title="Ajouter Serveur" style="padding-bottom:1px" data-target="#myModal{{ i.id }}"><a class="icon-plus-sign" title="Ajouter Serveur"></a></button>
<div class="modal fade" id="myModal{{ i.id }}" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Ajouter Serveur</h4>
</div>
<div class="modal-body">
<form method="post" class="loginForm">
<input type="hidden" name="lb" value="{{ i.Nom }}">
<h6>{% csrf_token %}
{{ form.as_table }}</h6>
<input type="submit" name="submit" class="btn btn-primary " value="Submit" />
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div></div>
</div>
<div class="box-content box-table">
<table class="table table-hover tablesorter">
<thead>
<tr>
<th>Nom</th>
<th>Adresse</th>
<th>Etat</th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
{% for j in s %}
{% if i.Nom == j.LB %}
<tr>
<td>{{ j.Nom }}</td>
<td>{{ j.Adresse }}</td>
{% if j.Etat == m %}
<td>Désactiver</td>
{% else %}
<td>Activer</td>
{% endif %}
<td><a>Edit</a></td>
<td>Supprimer</td>
{% if j.Etat == m %}
<td class="icon-ok-circle icon-large" style="color : green" title="Activé"></td>
{% else %}
<td class="icon-remove-circle icon-large" style="color : red" title="Désactivé"></td>
{% endif %}
</tr>
{% endif %}
{% endfor %}
</tbody>
</table>
</div>
</div>
<script>
var a = "{{ i.id }}"
$(document).ready(function(){
$("#myBtn"+a).click(function(){
$("#myModal"+a).modal({show:true});
});
});
</script>
{% endfor %}
</div>

Answer 2

In HTML id have unique identification. So we use unique id in every modal
{% for l in lamp %}
<h6>change in button</h6>
<button data-target="#mymodal{{l.id}}"</button>
<h6>change in modal id </h6>
<div class="modal" id="mymodal{{l.id}}"</div>
{% endfor %}