multi modals bootstrap in for loop 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>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <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><a href="/etat/{{ j.id }}">Désactiver</a></td>
                                {% else %}
                                <td><a  href="/etat/{{ j.id }}">Activer</a></td>
                                {% endif %}
                                <td><a>Edit</a></td>
                                <td><a href="/delete/{{ j.id }}">Supprimer</a></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 %}