navigation button in flipbook is not functioning when user navigates back through the pages

Question

I have created a flipbook content with turnjs plugin. Additionally, I have added two navigation buttons to help users to navigate better through the flipbook; left arrow(previous slides), right arrow(next slides).

Furthermore, I have set the following features for the implementation of the navigation arrow through the flipbook:

1.) for the first page of the flipbook, only the right arrow is showing, while the left arrow is hidden

2.) subsequent pages will show both arrows, left and right arrows

3.) when user navigates to the last page, the right arrow will be hidden and only the left arrow is displayed.

4.) when user navigates back from the last page, hence, after the last page to the previous page, both arrows should display

5.) when user navigates back to the first page, the left arrow will be hidden and only the right arrow will be on display.

Therefore, these are the following features that defines the behaviour of the navigation button in the flipbook.

Issue:

I am able to set the functional features of the navigation button till feature 3.). Hence, from the issue arises from feature 4. Therefore, after the user has navigated to the last page and decides to navigate back from the last pages, the right arrow remains hidden. Secondly, after the user has navigated back to the first page, the right arrow is still hidden, while the left arrow is still showing.

Hence, I would like to ask on how to resolve the following issue.

code:

function Models() {
  $("#Model_flipbook").turn({
    width: 1920,
    height: 1080,
    elevation: 130,
    //set initial page
    page: 1,
    //set the number of pages of the flipbook
    pages: 11,
    autoCenter: false
  });
}

function ModelCheckPage(page) {

  if ($("#Model_flipbook").turn("page") > 1 && $("#Model_flipbook").turn("page") < 11) {
    // If the page we are currently on is not the first page, reveal the back button
    $("#Model_LeftSide").removeClass("hidden");
  } else if ($("#Model_flipbook").turn("page") == 11) {
    // If the page we're on is the last page, hide the next button
    $("#Model_RightSide").addClass("hidden");
  }
}

function NextSlide() {
  ModelCheckPage($("#Model_flipbook").turn("next"));
  console.log("next");
}

function PreviousSlide() {
  ModelCheckPage($("#Model_flipbook").turn("previous"));
  console.log("previous");
}

  #Model_LeftSide {
    position: absolute;
    padding: 0;
    margin: 0;
    top: 0px;
    left: 0px;
    outline: 0px;
    z-index: 2;
    border: 0;
    background: transparent;
  }
  #Model_RightSide {
    position: absolute;
    padding: 0;
    margin: 0;
    top: 0px;
    left: 150px;
    outline: 0px;
    z-index: 2;
    border: 0;
    background: transparent;
  }
  .hidden {
    display: none;
  }

<div id="Models_Page" align="center" style="position:absolute; width:1920px; height:1080px; background-repeat: no-repeat; display: none; z-index=4; top:0px; left:1921px; ">
  <button id="Model_LeftSide" class="hidden" onclick="PreviousSlide()">
    <img src="lib/img/LeftSide.png">
  </button>
  <button id="Model_RightSide" onclick="NextSlide()">
    <img src="lib/img/RightSide.png">
  </button>

  <!--Div part for keynote images-->
  <div id="Model_flipbook" style="position:absolute;">
    <div id="Model_flip_1">
      <img src="lib/img/Model(KeyNote)_1.jpeg" />
    </div>
    <div id="Model_flip_2">
      <img src="lib/img/Model(KeyNote)_2.jpeg" />
    </div>
    //.....(mulitple flip pages content).....
  </div>
</div>