my if condition wont hide accordingly my next and previous buttons

Question

I need a if condition which hides the first page=1 previous button, and on page 8 it hides the next button i did use the below code and try but it is not hiding accordingly:

var page = 8;
if(page == 0){
    $("#prev-button").hide();
    $("#next-button").show();
}else if (page == 8) {
    $("#prev-button").show();
    $("#next-button").hide();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="load-more"  id="next-button">
  <a href="${nextUrl}" class="btn-on-white white">Next</a>
</div>  

<div class="previous" id="prev-button">
  <a href="${prevUrl}" class="btn-on-white-test white">Prev</a>
</div>

Answer 1

Maybe this will help you on what you're trying to achieve:

      var page = 0;
      $("#prev-button").hide();
      $("#next-button").show();

      function showBoth() {
        if (page < 8 && page > 0) {
          $("#prev-button").show();
          $("#next-button").show();
        }
      }

      $("#prev-button").on("click", function () {
        page--;
        showBoth();
        if (page == 0) $(this).hide();
      });
      $("#next-button").on("click", function () {
        page++;
        showBoth();
        if (page == 8) $(this).hide();
      });