Q:

jQuery click function returns all images from instagram api in bootstrap modal

I have been piecing together a script using jQuery and instagrams api. I want to display the image/video in the bootstrap modal when that image/video is clicked. Currently it displays all the images that have loaded when you click on one. What am I misshing? Here is my complete script - 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>IG</title>
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-modal/2.1.0/bootstrap-modal.pack.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
  </head>
  <body>

    <div class="container">
      <div class="row results">
      </div>
    </div>

<!-- Modal -->

    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
          </div>
          <div class="modal-body">

          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

    <script>
         $(function () {

           // Adding the above wrapper around all the code makes sure the whole
           // DOM is loaded before any code is actually run. Its a good practice
           // read about it here: http://api.jquery.com/ready/

           var apiUrl = "https://api.instagram.com/v1/users/self/feed?access_token=[token here]&callback=?"

           // This is the users url 
           // https://api.instagram.com/v1/media/popular?client_id=" + client_id + "&callback=?

           // This is the search url for 
           // https://api.instagram.com/v1/locations/search?access_token=%3CACCESS_TOKEN%3E&foursquare_v2_id=447bf8f1f964a520ec331fe3

           function success (instagramData) {
             // This is run if the ajax call is successful
             // The "instagramData" being passed to this function is the returned data from the url

             if (instagramData.meta.code != 200) {
               // If we don't get a 200 that means instagram threw an error.
               // Instead of adding the html for images to .results div, we will put the error in there so
               // we know what happend
               $('.results').html('<h1>An Error Occured</h1><p>' + instagramData.meta.error_message + '</p>');
               return
             }

             $.each(instagramData.data, function(index, gram) {
               // instagramData.data is the "data" inside the returned json. There is "meta" and "data".
               // index is just an incremental number for each gram. we don't need it yet.
               // gram is the information for EACH gram. this $.each loops over all of them.

               if (gram.type == 'image') {
                 // for this example we only care about images
                 $('.results').append('<div class="col-md-3">' +
                                      '<p><img class="img-circle" style="margin-right: 5px" width="60" src="' + gram.user.profile_picture + '">' + gram.user.username + '</p>' +
                                      '<a href="#myModal" data-toggle="modal" data-img-url="' + gram.images.standard_resolution.url + '"><img class="img-thumbnail" src="' + gram.images.low_resolution.url + '"/></a>' +
                                      '</div>')
               }
               if (gram.type == 'video') {
                 // for this example we only care about videos
                 $('.results').append('<div class="col-md-3">' +
                                      '<p><img class="img-circle" style="margin-right: 5px" width="60" src="' + gram.user.profile_picture + '">' + gram.user.username + '</p>' +
                                      '<a href="#myModal" data-toggle="modal" data-img-url="' + gram.videos.standard_resolution.url +'"><video class="img-thumbnail" src="' + gram.videos.low_resolution.url + '"/></a>' +
                                      '</div>')
               }

               //click function for returning images in modal. 

               $('.img-thumbnail').click(function(){
                $('.modal-body').append('<img src="' + gram.images.standard_resolution.url + '">');
                  console.log("click");
               });

             });
           }

           $.ajax({
             type: "GET",
             url: apiUrl,
             dataType: "json",
             success: success // If successful we call the success function, which lives up above
           });
         });

      </script>
  </body>
</html>

A:

It's because you are reassigning a click event to each image selected by $('.img-thumbnail'). You need to move your click handler outside of the loop:
$.each(instagramData.data, function(index, gram) {
// rest of your code goes here
});

// this should be outside of $.each
$('.img-thumbnail').click(function(){
// your code goes here
});

UPDATE:
Look in your code where you did the following lines of code. Move the class img-thumbnail to the a tag like so: <a href="#myModal" class='img-thumbnail' ...rest of attributes goes here/>. Just take note though that you might be using img-thumbnail to apply some styles. If you do then just create a new selector.
'<a href="#myModal" data-toggle="modal" data-img-url="' + 
gram.images.standard_resolution.url + '"><img class="img-thumbnail" src="' + 
gram.images.low_resolution.url + '"/></a>' +

'<a href="#myModal" data-toggle="modal" data-img-url="' + 
gram.videos.standard_resolution.url +'"><video class="img-thumbnail" src="' + 
gram.videos.low_resolution.url + '"/></a>' +

Your click event should now look like this:
// this should be outside of $.each
$('.img-thumbnail').click(function(){
// your code goes here
var imgSrc = $(this).data('img-url');
// now instead of using "gram.images.standard_resolution.url" 
// you can now user "imgSrc"
});

