title: Dynamic bootstrap modal within a loop
body: <p>I am creating spans in a jinja2 loop, when the user click on them, a modal should appear with a dynamic content . The dynamic item more specifically is the image of the map inside each modal :</p>
  
  <pre><code>&lt;img src="http://maps.googleapis.com/maps/api/staticmap?markers=color:red%7Clabel:S%7C{{item.venue.latitude}},{{item.venue.longitude}}&amp;zoom=17&amp;size=400x400&amp;sensor=false"/&gt;
  </code></pre>
  
  <p>To avoid one static modal that will repeat itself within the loop, I added  a dynamic <code>id</code> to the modal dialog :</p>
  
  <pre><code>&lt;div class="modal-dialog" id="{{id}}" &gt;
  </code></pre>
  
  <p>But it seems that this doesn't work . Here is my code :</p>
  
  <pre><code>&lt;span style="cursor: pointer;" type="button" class="badge badge-white" data-toggle="modal" data-target="#myModal"&gt;Map&lt;/span&gt;
  &lt;!-- Modal --&gt;
  &lt;div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"&gt;
    &lt;div class="modal-dialog" id="{{id}}" &gt;
      &lt;div class="modal-content" &gt;
        &lt;div class="modal-header"&gt;
          &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;&amp;times;&lt;/button&gt;
          &lt;h4 class="modal-title" id="myModalLabel"&gt;Lorem ipsum&lt;small&gt;Lorem ipsum&lt;/small&gt;&lt;/h4&gt;
        &lt;/div&gt;
        &lt;div class="modal-body text-center pagination-centered"&gt;
          &lt;img src="http://maps.googleapis.com/maps/api/staticmap?markers=color:red%7Clabel:S%7C{{item.venue.latitude}},{{item.venue.longitude}}&amp;zoom=17&amp;size=400x400&amp;sensor=false"/&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;!--&lt;button type="button" class="btn btn-primary"&gt;Save changes&lt;/button&gt;--&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>