title: Using Bootstrap Modal with a foreach loop
body: <p>I have a foreach loop which loops through my documents from a database, it only pulls in the IMAGES then I have a 4 images per row on my page, I would like to click one it opens a Modal with the image, click another same again. So i have this setup:</p>
  
  
  
  <pre><code>@foreach (var item in Model.DocumentList)
  {
      // Below I am currently using just a ID for modal (which i know is wrong)
      &lt;div class="col-lg-3 col-md-4 col-xs-6 thumb"&gt;
          &lt;a class="thumbnail" data-toggle="modal)" data-target="#myModal" title="@item.FileDescription"&gt;
              @Html.DocumentUrl(item.FileUrl, false)
          &lt;/a&gt;
          &lt;span class="col-xs-12" style="text-align:center;"&gt;@item.CreatedDate.ToShortDateString()&lt;/span&gt;
      &lt;/div&gt;       
      &lt;div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"&gt;
          &lt;div class="modal-dialog"&gt;
              &lt;div class="modal-content"&gt;
                  &lt;div class="modal-header"&gt;
                      &lt;button type="button" class="close" data-dismiss="modal"&gt;&lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;&lt;span class="sr-only"&gt;Close&lt;/span&gt;&lt;/button&gt;
                      &lt;h4 class="modal-title" id="myModalLabel"&gt;Uploaded - @item.CreatedDate.ToShortDateString()&lt;/h4&gt;
                  &lt;/div&gt;
                  &lt;div class="modal-body"&gt;
                      @Html.DocumentUrl(item.FileUrl, true)
                      &lt;div class="row"&gt;
                          &lt;div class="col-md-12"&gt;
                              &lt;p&gt;
                                  @item.FileDescription
                              &lt;/p&gt;
                          &lt;/div&gt;
                      &lt;/div&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;button type="button" class="btn banner-background white-text"&gt;Download&lt;/button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  }
  </code></pre>
  
  <p>I can see why the data-target id modal isn't working, when I hover it works i see the different title, however when I click the img even if I click img 4 it just shows the first img, first title etc. How can I do this so it works with each item properly? Also changing id modal to a class doesn't help either.</p>