JSFiddle - React, Tailwind, and code Playground

HTML

<div id="buttons">
    <a href="#" class="prevButton">PREVIOUS</a>
    <a href="#" class="nextButton">NEXT</a>
</div>
<div id=issueContainer>
<div id="backIssue0">
    <img src="http://www.tuwidesign.com/tuwi/wp-content/uploads/2009/05/web_designer_magazine.jpg" width="100" alt="#" />
</div>
<div id="backIssue1">
    <img src="http://blogof.francescomugnai.com/wp-content/uploads/2008/07/cover_web_designer.jpg" width="100" alt="#" />
</div>
<div id="backIssue2">
    <img src="http://www.onerutter.com/wp-content/uploads/2011/10/WD189.jpg" width="100" alt="#" />
</div>
<div id="backIssue3">
    <img src="http://www.ukhumourweb.co.uk/web-design-201.jpg" width="100" alt="#" />
</div>
<div id="backIssue4">
    <img src="http://www.solidshops.com/blog/wp-content/uploads/web-designer-magazine1.jpg" width="100" alt="#" />
</div>
</div>

CSS

#backIssue0{width:100px;display:none; float:left;}
#backIssue1{width:100px;display:none;float:left;}
#backIssue2{width:100px;display:none;float:left;}
#backIssue3{width:100px;display:none;float:left;}
#backIssue4{width:100px;display:none;float:left;}
.nextButton{margin-left:50px;}
.previousButton{}
#issueContainer{width:100px;height:130px; overflow:hidden;}
#buttons{clear:both;}

JavaScript

var issueTotal = 0;
    
    $('#backIssue0').show();
    
    $('.prevButton').hide();    
    
    $('.nextButton').click(function(e) {
        e.preventDefault();
        
        issueTotal = issueTotal + 1;
        
        if(issueTotal > 0){
            $('.prevButton').show();
        }
        if(issueTotal < 4){
            $('.nextButton').show();
        }    
        if(issueTotal > 3){
            $('.nextButton').hide();
        }
        
        if(issueTotal == 0){
            $('#backIssue0').show();
        }
        if(issueTotal == 1){
            $('#backIssue0').hide();
            $('#backIssue1').show();
        }
        if(issueTotal == 2){
            $('#backIssue1').hide();
            $('#backIssue2').show();
        }
        if(issueTotal == 3){
            $('#backIssue2').hide();
            $('#backIssue3').show();
        }
        if(issueTotal == 4){
            $('#backIssue3').hide();
            $('#backIssue4').show();
        }
        
    });
    
    
    $('.prevButton').click(function(e) {
        e.preventDefault();
    
        issueTotal = issueTotal - 1;
    
        if(issueTotal > 1){
            $('.prevButton').show();
        }
        if(issueTotal < 1){
            $('.prevButton').hide();
        }
        if(issueTotal < 4){
            $('.nextButton').show();
        }    
        if(issueTotal > 3){
            $('.nextButton').hide();
        }
        
        if(issueTotal == 0){
            $('#backIssue0').show();
        }
        if(issueTotal == 1){
            $('#backIssue0').hide();
            $('#backIssue1').show();
        }
        if(issueTotal == 2){
            $('#backIssue1').hide();
            $('#backIssue2').show();
        }
        if(issueTotal == 3){
            $('#backIssue2').hide();
            $('#backIssue3').show();
        }
        if(issueTotal == 4){
            $('#backIssue3').hide();
            $('#backIssue4').show();
        }
    });