I have been working on a script with an api. I am trying to return the image in a bootstrap modal when the a element is clicked. Its breaking my each loop and only returning 1 image on the page when 20 is the default. And its not displaying in the modal when clicked. However I can see the img url in my console so its kind of right I think. At first I had the click function inside the loop and when you would click one image it would return all of the images on the page in the modal. So I started looking into creating a variable that I could access outside of the each loop. I am very novice with jQuery. Here is the chunk of code of the function containing the loop and click function. What am I missing?

Thanks, Clayton -

Code:
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;
                }

                var gramimgData = 'gramimgData';

                $.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>');
                    }

                    gramimgData = $(gram.images.standard_resolution.url);

                });

                //click function for returning images in modal. 

                $('a').click(function(){
                    $('.modal-body').append('<img src="' + gramimgData + '">');
                    console.log('click');
                });
            }