Unable to click to next and previous images in Flickr API gallery

function prevImage(){
  var $activeImg = $(".selected").removeClass('selected');

  var $imagePrev =$activeImg.prev('.flickerImage').addClass('selected').attr("src");



  $overlay.append($imagePrev);
  $imagePrev.show();
}

$(document).ready(function() {

  var $overlay = $('<div id="overlay"></div>');
  var $closeLightbox = $("<div id='closeLightbox'></div>");
  var $poster = $('<div id="poster"></div>');
  var $infoDiv = $('<div id="infoDiv"></div>');
  var $p = $('<p id="posterText"></p>');
  var $p2 = $('<p id="posterText2"></p>');

  //Keep track of image index for prev/next, we will use a list index
  //position to determine where we are and what it means to move forward
  //and backwards by 1.

  var $index = 0;

  //Add image to overlay

  var $img = ('.flickrImage');

  $("body").append($overlay);

  $(".arrows").hide();//hide arrows div on page load
  $closeLightbox.hide();

  var saved_results = null;


// Pull photos from Flickr
var flickerAPI = "https://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
var animal = $(this).text();

var flickrOptions = {
  tags: "german shepherd, border collie, black terrier",
  tagmode: "any",
  format: "json"
};
function displayPhotos(data) {
  var photoHTML = '<ul id="imageGallery">';
  var saved_results = data;
  var indexOfImage;
  $.each(data.items,function(i,photo) {
    if(i < 15){
    photoHTML += '<li class="layout">';
  // photoHTML += '<a href="" >';
  photoHTML += '<a href="' + photo.link + '" class="image">';
    //photoHTML += '<img src="' + photo.link + '" class="image">';
    photoHTML += '<img class="flickrImage" src="' + photo.media.m + '" photo_index ="' + i + '"></a></li>';
  }
  }); // end each
  photoHTML += '</ul>';
  $('.galleryDiv').html(photoHTML);
//Prevent flickr page/overlay load
  $('li').on('click', '.image', function(e) {
          e.preventDefault();
        });

  $("#imageGallery a .flickrImage").click(function (event) {
    //var selected =  $(this).addClass("selected").attr('src');
    var selected =  $('.image').addClass("selected").attr('src');

    var indexOfImage = parseInt($(this).attr('photo_index'));
      event.preventDefault();//prevent default browser behavior
      event.stopPropagation();//prevent bubbling

      $(this).unbind('click');
      $(".flickrImage").removeClass('selected');//removes class .selected on all images not currently selected

      $(this).addClass("selected").attr('src');// adds class .selected to image that is clicked
      //$overlay.append($(this));
      $overlay.append($poster).append($(this));

      $(this).show();
      $closeLightbox.show();
        $overlay.append($closeLightbox);

      $overlay.show();
      $overlay.append($poster);
      $poster.append($infoDiv);
      $infoDiv.append($p);
      $infoDiv.append($p2);
      $poster.show();

      var title = saved_results.items[indexOfImage].title;
      var date = saved_results.items[indexOfImage].date_taken;
      console.log(indexOfImage);
      $p.append(title);
      $p2.append(date);
      console.log(date);
      console.log(title);

     $(".arrows").show();
//Hide fixed scroll bar with z-index that was previously getting in the way of te close button
      $("#top").hide();

      $("#leftArrow").show();//show leftArrow in overlay

      $("#rightArrow").show();//show rightArrow in overlay




function prevImage(){
  var $activeImg = $(".selected");
  var $previous = $activeImg.closest('li').prev().find('a');

  var $captionText = $previous.addClass('selected').children("img").attr("alt");
  var $imagePrev = $previous.addClass('selected').attr("href");
  $activeImg.removeClass('selected');


}

function nextImage(){
  var $activeImg = $(".selected").removeClass('selected');//create location for current image selected by assigning .selected class (established above) to variable within function @ the local scope

 var $imageNext = $activeImg.find().next('.flickerImage').addClass('selected').attr("src");

//debugger;
$overlay.append($imageNext);
$overlay.show($imageNext);

}


$('#leftArrow').click(function(){
  prevImage();
});
$('#rightArrow').click(function(){
  nextImage();
});


});


  //When close button is clicked hide the overlay and arrows, re-introduce search box and remove video

  var $closeLightbox = $("<div id='closeLightbox'></div>");//create div for close button and style in css

  $overlay.before($closeLightbox);//tell DOM where close button fits in the DOM structure of the overlay

  $($closeLightbox).click(function () {
      $closeLightbox.hide();
      $overlay.hide();//close the overlay
      $("#top").show();//bring back search bar when overlay is hidden
      $('.selected').hide();
      $(".arrows").hide();
        location.reload();//reload page to prevent text/photos from being displayed more than once if/when overlay closed/re-opened


  });//end img/thumbnail click function/event
}//end callback for the api request
$.getJSON(flickerAPI, flickrOptions, displayPhotos);


// end of first API Request and JSON callback on initial page load
//
//
// Beginning of 2nd API request

$("button").click(function (event) {
    event.preventDefault();//
    //event.stopPropagation();
    // the AJAX part
    var flickerAPI = "https://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
    var animal = $(this).text();
    var flickrOptions = {
      tags: animal,
      format: "json"
    };

    $.getJSON(flickerAPI, flickrOptions, displayPhotos);


  });





}); //DOCUMENT.READY END