title: Show popup with image on-click
body: <p>I have an MVC 5 application that contains a BookList. In the razor view a show the cover of each book by sending the ISBN to Amazon:</p>
  
  <pre><code>&lt;img id="@item._id" class="img img-responsive img-thumbnail" style="max-width: 110px" src=@string.Format("http://images.amazon.com/images/P/{0}.01.mzzzzzzz", @item.isbn)&gt;
  </code></pre>
  
  <p>These images are off course in a <code>foreach</code> loop:</p>
  
  <pre><code>@foreach (var item in Model) {...}
  </code></pre>
  
  <p>What I want to do is, using jquery, show an enlarged version of the cover in a popup. For this I've been following a solution I found somewhere online. In order for the on-click to work, I've used the class that I assigned to the image:</p>
  
  <pre><code>$(".img").click(function () {
      if ($(this).hasClass("selected")) {
          deselect();
      } else {
          $(this).addClass("selected");
          $(".pop").slideFadeToggle(function () {
          });
      }
      return false;
  });
  </code></pre>
  
  <p>In this function a css class is applied or removed that will show or hide a div that contains the enlarged image:</p>
  
  <pre><code>&lt;div class="messagepop pop"&gt;
      &lt;img id="@item._id" class="img" src=@string.Format("http://images.amazon.com/images/P/{0}", @item.isbn)&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The problem I'm facing is that clicking on the image, the class is applied to all images with the <code>.img</code> in the list and all the enlarged covers are shown. I need to somehow identify the specific image that was clicked. I thought that would be achieved by $(this), but apparently not.</p>