title: How to use bootstrap modal on multiple images on same page on image click?
body: <p>I have about 18 images on the page that I am trying to display larger in a modal upon clicking the image, but it only displays the first image every time.</p>
  
  <p>I have tried traversing the DOM with <code>$(this).find('img')</code> and I tried it with children also I have tried setting the images to different ids and setting these as a variable.</p>
  
  <p>My current attempt was to set the small image's path to the same id as the larger image's path and then using find. I only have the first two images "set up" for now, since I can't get it working right yet.</p>
  
  <p>BTW, I have tried other methods of zooming in and popovers and plug-ins with no success either, this is the closest I've come to something that works.</p>
  
  <p>Note: <em>There is another question which shows pretty much the same issue, but the answer there didn't work for me.</em>  </p>
  
  <pre><code>&lt;img  height="100" width="80" id="1" data-toggle="modal" data-target="#myModal" data-dismiss="modal" src='~/Content/MyPics/TextDollarPart1.JPG' alt='Text dollar code part one.' /&gt;  
  &lt;div id="myModal" class="modal fade" &gt;
      &lt;div class=" modal-lg"&gt;
          &lt;div class="modal-content"&gt;
              &lt;div class="modal-body"&gt;
                  &lt;img id="1"src="~/Content/MyPics/TextDollarPart1.JPG" class="img-responsive" height="1500" width="1000"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;   
  &lt;img  height="100" width="80" id="2" data-toggle="modal" data-target="#myModal" data-dismiss="modal" src="~/Content/MyPics/TextDollarPart2.JPG" alt="Text dollar code part two." /&gt;
  &lt;div id="myModal" class="modal fade"&gt;
      &lt;div class="modal-dialog modal-lg"&gt;
          &lt;div class="modal-content"&gt;
              &lt;div class="modal-body"&gt;
                  &lt;img id="2" src="~/Content/MyPics/TextDollarPart2.JPG" class="img-responsive" height="1500" width="1000"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Script</p>
  
  <pre><code>$(document).ready(function () {       
      $('img').on('click', function () {
          var picID = $(this).attr('id');
           $(this).find('picID');
          $('picID').modal('toggle');      
      });
  });
  </code></pre>