JSFiddle - React, Tailwind, and code Playground

HTML

<div class="locationGallery">    
    <div class="imageContainer">
        <span class="polaroidImage" ><img src="http://imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_nikkor28-300mmf_35-56gd_ed_vr/img/sample/sample4_l.jpg" class="thumb" /></span></div>
    <div class="imageContainer"><span class="polaroidImage" ><img src="http://www.ndaccess.com/Sample/Images/Image1.jpg" class="thumb" /></span></div>
    <div class="imageContainer"><span class="polaroidImage" ><img src="http://www.type2consulting.com/wp-content/themes/thesis_16/custom/rotator/sample-1.jpg" class="thumb" /></span></div>
    <div class="imageContainer"><span class="polaroidImage" ref="4"><img src="http://indianapublicmedia.org/arts/files/2012/04/sample-gates-9-940x626.jpg" class="thumb" /></span></div>
    <div class="clear"></div>
    <div class="imageDisplay">
        <span class="prev">prev</span>
        <span class="next">next</span>        
    </div>
</div>

CSS

body{background-color:#BBBBBB;}
.locationGallery{width:450px; margin:0 auto; text-align:center; background-color:#FFFFFF;}
.next{margin-left:25px; padding:3px 10px; height:40px; cursor:pointer; background-color:#000000; color:#FFFFFF; display:none;position:absolute; right:0px;}
.prev{margin-right:25px; padding:3px 10px; height:40px; cursor:pointer; background-color:#000000; color:#FFFFFF; display:none; position:absolute; left:0px;}
.imageContainer{float:left; padding:10px;}
.clear{clear:both;}
.imageDisplay{margin:0 auto; position:relative;}
.imageDisplay img{width:450px;}
.space{height:30px; width:100%; clear:both;}
.imageContainer img{width 130px; height:65px;}
.buttons{height:30px; margin-top:15px;}

JavaScript

var numImgs = $('div.locationGallery .polaroidImage').length;
var prevImages = $('.polaroidImage').prevAll().length;
var imageClicked;

$('.polaroidImage').click(function(){
    var prevImages = $(this.parentNode).prevAll().find('.polaroidImage').length;
    if(prevImages > 0){
        $('.prev').show();
    }else{
        $('.prev').hide();
    }
    if(prevImages == (numImgs - 1)){
        $('.next').hide();
    }else{
        $('.next').show();
    }
});

$(".thumb").click(function(){
      imageClicked = $(this);
    $(".imageDisplay").find('img').remove();
    $(".imageDisplay").append("<img src='"+imageClicked.attr('src')+"' />")
});

$('.next').click(function(){
    imageClicked.closest('.imageContainer').next().find('img').trigger('click');
});

$('.prev').click(function(){
    imageClicked.closest('.imageContainer').prev().find('img').trigger('click');
});