Q:

button arrows not working and wrong number of elements showing

I have been cobbling something together from different examples that I have seen online  I would like to know why is it not just showing 1 button per page and instead showing them all and decreasing the numbers of visible buttons for each right click by one. And yet when you click the left arrow it shows a blank screen.
Also if you click the right arrow after clicking the left arrow you will be stuck on a page with only one button, and the left still just shows a blank screen.
I am trying to have only one button on screen at a time and be able to switch between the different buttons via the right and left arrows. this is for an idle mine game.

.hide {

  display: none;

}

.step-box {

  width: 640px;

  height: 150px;

  border: 1px solid;

  position: relative;

}

.names-content {

  padding: 10px

}

ul {

  list-style: none;

}

li {

  float: center;

  margin: 5px;

  background: #ABA38F;

  color: #fff;

  padding: 5px;

}

li span {

  width: 150px;

  text-align: left;

}

.arrows {

  position: absolute;

  top: 70px;

  cursor: pointer;

}

.arrow-left {

  left: 10px;

}

.arrow-right {

  right: 10px;

}

.arrows span {

  width: 30px;

  height: 30px;

  border-radius: 30px;

  background: #BABABA;

  color: #fff;

  clear: both;

  display: block;

  text-align: center;

  font-size: 20px;

  line-height: 30px;

}
<html>

<head>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
  <link rel="stylesheet" type="text/css" href="test2.css" />
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
</head>

<body>
  <div class="step-box">


    <div class="names-content">
      <ul id="mines">
        <li>test1</li>
        <li class="hide">test2</li>
        <li class="hide">test3</li>
        <li class="hide">test4</li>
        <li class="hide">test5</li>
        <li class="hide">test6</li>
        <li class="hide">test7</li>
        <li class="hide">test8</li>
        <li class="hide">test9</li>
        <li class="hide">test0</li>
        <li class="hide">test01</li>



      </ul>
    </div>
    <div class="arrows arrow-right"> <span><i> > </i></span>
    </div>
    <div class="arrows arrow-left"> <span><i> < </i></span>
    </div>
  </div>
  <script>
    var arrowRightCount = 0;
    var arrowLeftCount = 0;

    $(document).ready(function() {

      //RIGHT ARROW
      $(".step-box .arrow-right").click(function(e) {
        console.log("right arrow clicked");
        var lnt = $("#mines > li").length;
        if (lnt > 1) {
          arrowRightCount = arrowRightCount + 1;
          arrowLeftCount = arrowLeftCount - 1;

          if (arrowRightCount > lnt) {
            arrowRightCount = lnt;
          }

          for (var i = 0; i < arrowRightCount; i++) {
            $("#mines > li:eq(" + i + ")").addClass('hide');
          }

          var jlimit = arrowRightCount + 1;
          if (jlimit > lnt) {
            jlimit = lnt;
          }

          for (var j = arrowRightCount; j < jlimit; j++) {
            $("#mines > li:eq(" + i + ")").removeClass('hide');
          }


        }

      });


      //LEFT ARROW
      $(".step-box .arrow-left").click(function(e) {
        console.log("left arrow clicked");
        var lnt = $("#mines > li").length;
        if (lnt > 1) {
          arrowLeftCount = arrowLeftCount + 1;
          arrowRightCount = arrowRightCount - 1;

          if (arrowLeftCount > lnt) {
            arrowLeftCount = lnt;
          }

          for (var i = 0; i < arrowLeftCount; i++) {
            $("#mines > li:eq(" + i + ")").addClass('hide');
          }

          var jlimit = arrowLeftCount + 1;
          if (jlimit > lnt) {
            jlimit = lnt;
          }

          for (var j = arrowLeftCount; j < jlimit; j++) {
            $("#mines > li:eq(" + i + ")").removeClass('hide');
          }


        }

      });
    });
  </script>
</body>

</html>

A:

I hope that you are able to understand what your code is doing...
From what I understood, the jquery part is adding the class hide to the list items to hide and removing it from the list items to be displayed.
1] All the buttons are being displayed as initially none of the items have the class hide set to them, to do this either apply the attribute class="hide" to all the list items in html or create a function in JavaScript and run it on pageload.
2] For the inconsistent behavior of left & right buttons, check the jquery part, those are not identical in operations. Make the left one as right one and see the difference.
For right button:
arrowRightCount = arrowRightCount + 3;
arrowLeftCount = arrowLeftCount - 3;

For left button:
arrowLeftCount = arrowLeftCount - 3;
arrowRightCount = arrowRightCount - 3;

3] if you want to display only 1 button, why are you using 3 for everything in jquery, make it to 1 and it should display only 1 button
Tip: Use different names for buttons to see actually which button is being displayed and in what order. 
Update: Even I'm not much familiar with jquery but this is very minimal.
Check this updated jquery, since all the list items are already hidden we don't need to apply the add/remove class action for all the items, so modified it to apply only on the items being modified i.e. prev/next based on counter (cntr) to identify the current position.
Check this jsfiddle for output
var mincount = 0; 
var maxcount = 10;
var cntr = 0;
$(document).ready(function() {

  //RIGHT ARROW
  $(".step-box .arrow-right").click(function(e) {
    if(cntr >= mincount && cntr < maxcount){
      $("#mines > li:eq(" + cntr + ")").addClass('hide');
      cntr = cntr + 1;
      $("#mines > li:eq(" + cntr + ")").removeClass('hide');
    }
  });

  //LEFT ARROW
  $(".step-box .arrow-left").click(function(e) {
    if(cntr > mincount && cntr <= maxcount){
      $("#mines > li:eq(" + cntr + ")").addClass('hide');
      cntr = cntr - 1;
      $("#mines > li:eq(" + cntr + ")").removeClass('hide');
    }
  });

});

