title: multi modals bootstrap in for loop django
body: <p>I have a for loop on my html code to display a list of data, when I made a <code>Bootstrap Modal</code> 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. </p>
  
  <pre><code>    {% for i in lb %}
      &lt;button  class="btn" id="myBtn" title="Ajouter Serveur" style="padding-bottom:1px" data-target="#myModal"&gt;&lt;a class="icon-plus-sign" title="Ajouter Serveur"&gt;&lt;/a&gt;&lt;/button&gt;
      &lt;div class="modal fade" id="myModal" role="dialog"&gt;
      &lt;div class="modal-dialog"&gt;
      &lt;div class="modal-content"&gt;
          &lt;div class="modal-header"&gt;
  
                              &lt;h4 class="modal-title"&gt;Ajouter Serveur&lt;/h4&gt;
                          &lt;/div&gt;
      &lt;div class="modal-body"&gt;
                              &lt;form method="post" class="loginForm"&gt;
                              &lt;input type="hidden" name="lb" value="{{ i.Nom }}"&gt;
                              &lt;h6&gt;{% csrf_token %}
                                  {{ form.as_table }}&lt;/h6&gt;
  
                          &lt;input type="submit" name="submit" class="btn btn-primary " value="Submit" /&gt;
                              &lt;/form&gt;
                          &lt;/div&gt;
                          &lt;div class="modal-footer"&gt;
  
                              &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
                          &lt;/div&gt;
                          &lt;/div&gt;
  
                          &lt;/div&gt;&lt;/div&gt;
  
       {% endfor %}
  </code></pre>