javascript - Replacing multiple div content with other content and being able to cycle -

currently have following:

<div class="arrowleft"></div> <div class="arrowright"></div> <div class="reviewcomment"> <p>“thank making selling our car painless.”</p> </div> <div class="reviewname"> </div> </div> 

i've been looking @ different ways work when click 1 of "arrow" buttons, replaces content in "reviewcomment". far i've managed replace content going 1 way. example when gets 5th div's content, won't click first one?

i've tried multiple different ways of doing can't seem cycle through like.

i can't seem replace content of reviewname @ same time reviewcomment.

keep track of comment you're on, , how many comments there are. if total comments == current comment, go first one. ex code:

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); }) 

t̶h̶i̶s̶ ̶c̶o̶d̶e̶ ̶a̶s̶ ̶i̶s̶ ̶w̶i̶l̶l̶ ̶n̶o̶t̶ ̶w̶o̶r̶k̶ don't know how you're fetching comments. can transplant logic example in own code. gets on way.

i'll try , edit js fiddle shortly.

update

working fiddle here: https://jsfiddle.net/mpr9j6sd/