JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
  <div class="numbers text-center" id="numbers_wrapper"></div>
  <div class="controls text-center">
    <div class="btn-group" id="controls">
      <button type="button" class="btn btn-primary btn-sm" data-direction="left">Prev</button>
      <button type="button" class="btn btn-primary btn-sm" data-direction="right">Next</button>
    </div>
  </div>
</div>

CSS

.numbers {
  width: 34px;
  height: 34px;
  line-height: 34px;
  text-align: center;
  margin: 5px auto;
  border: 1px solid #286da9;
  background: #337ab7;
  color: #fff;
  border-radius: 2px;
}
.controls > div {
  display: inline-block;
}

JavaScript

var numbers = [4, 9, 16, 25];
var counter = 0;
var updateCounter = function(){
  var direction = $(this).data("direction")
	if(direction === "left") {
  	counter--;
  } else {
  	counter++;
  }
  console.log(counter);
  console.log(direction);
}

$('#numbers_wrapper').text(numbers[counter]);

$('#controls button').on('click', function(){
	updateCounter();
  $('#numbers_wrapper').text(numbers[counter]);

});