JSFiddle - React, Tailwind, and code Playground

HTML

<h1 id="the-h"></h1>
<p id="the-p"></p>
<p><input type="button" id="deco" /> -</p>
<p><input type="button" id="inco" /> + </p>

JavaScript

var word = ["Getting lazy", "Shannon", "Letogasm", "fleek"];
var explanation = ["Getting lazy is the act of just laying on the ground after being slammed or a hard fall. Most commonly used amongst skaters, bmx riders, and other extreme sports.",  "The coolest person in the world. ", "Word used by Echelon and any other Jared Leto fan to describe the feeling of (sexual) pleasure/happiness associated with watching a Jared Leto/30 Second to Mars Music Video or Movie. In other words, a Jared Leto induced Orgasm.", "on point "];

var i=0;

function updateDiv(id, content) {
     document.getElementById(id).innerHTML = content;
}

function counter (step){
      if (word[i+step] !== undefined) {
           i+=step;
      } else {
          step < 0 ? i=word.length-1 : i=0;
      }
      updateDiv('the-h',word[i]);
      updateDiv('the-p',explanation[i]);
}
updateDiv('the-h',word[i]);
updateDiv('the-p',explanation[i]);

var decos = document.getElementById('deco');
decos.addEventListener('click', function() {
     counter(-1);
}, false);
var incos = document.getElementById('inco');
incos.addEventListener('click', function() {
     counter(+1);
}, false);