JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<div class="comments">
  <div class="arrowLeft">L</div>
  <div class="arrowRight">R</div>
  <div class="comment">comment 1</div>
</div>

CSS

.comments{
  width: 90%;
  height: 150px;
  background-color: #2c2d2e;
  color: white;
  display: block;
  margin: 5% auto;
  position: relative;
}

.comments .comment{
  width: 100%;
  height: 150px;
  text-align: center;
  line-height: 150px;
  display: block;
}

[class*='arrow']{
  width: 50px;
  height: 50px;
  background-color: white;
  font-family: "Lato", sans-serif;
  color: #2c2d2e;
  line-height: 50px;
  text-align: center;
  position: absolute;
  top: 0; 
  bottom: 0;
  margin: auto;
}

.arrowLeft{left: 5%;}
.arrowRight{right: 5%;}

JavaScript

var comments = ['comment 1', 'comment 2', 'comment 3', 'comment 4', 'comment 5'];
var currentComment = 0;
var totalComments = comments.length - 1;

$('.arrowRight').click(function(){
	currentComment++;
  
  if(currentComment > totalComments){
    // past last comment, load first
    $('.comments .comment').html(comments[0]);
    currentComment = 0;
  }else{
    $('.comments .comment').html(comments[currentComment]);
  }
  
    console.log(currentComment);
})

$('.arrowLeft').click(function(){
	currentComment--;
  
  if(currentComment < 0){
    // past first comment, load last
    $('.comments .comment').html(comments[totalComments]);
    currentComment = totalComments;
  }else{
    $('.comments .comment').html(comments[currentComment]);
  }
  
  console.log(currentComment);
})