In the same page i have multiple section.

One section will be show and this will happen using a class active.

In the same page i have li buttons 1, 2 and 3 when i click on one of them the section related appear and the old one disappear for that i'm using javascript to do it.

Also in the same page i have a next and previous button when i click on the next button i should appear the next section and disapear the old one.

And also the relate li to the section should have the class active the same thing for the previous when i click on it i should go to the old section and disappear the current one and the li number should be active.

And when i'm in the first section the previous button should be disapear and when i'm in the last section the next button should be disapear

How can i do the next and previous buttons in this way using javascrip?

Any Help Please!!?

let tab = document.querySelector(".nav li");
let tabs = document.querySelectorAll(".nav li");
let tabsArray = Array.from(tabs);
let section = document.querySelectorAll(".section");
let sectionArray = Array.from(section);
let nextButton = document.querySelector(".next");
let prevButton = document.querySelector(".previous");
let current = 0;

tabsArray.forEach((ele) => {
  ele.addEventListener("click", function (e) {
    tabsArray.forEach((ele) => {
      ele.classList.remove("show");
    });
    e.currentTarget.classList.add("show");

    sectionArray.forEach((sec) => {
      sec.classList.remove("active");
    });
    if (e.currentTarget.dataset.cont == "r1") {
      prevButton.classList.add("disable");
    } else {
      prevButton.classList.remove("disable");
    }
    if (
      document.querySelector("#" + e.currentTarget.dataset.cont) ==
      sectionArray[sectionArray.length - 1]
    ) {
      nextButton.classList.add("disable");
    } else {
      nextButton.classList.remove("disable");
    }                              
                                
    document
      .querySelector("#" + e.currentTarget.dataset.cont)
      .classList.add("active");
  });
});


.section {
display: none;
}

.section.active{
display: block;
}

ul {
list-style: none;
margin:0;
padding: 0;
display: flex;
align-items: center;
}

ul li {
background: #ccc;
padding: 10px 15px;
margin-left: 6px;
border-radius: 50%;
cursor: pointer;
opacity: .5;
}

ul li.show{
opacity: 1 !important;
}

.next,
.previous {
padding: 15px 10px;
border-radius: 6px;
background: deepskyblue;
color: white;
border:0;
outline: none;
cursor: pointer;
width: 100px;
}

.next.disable,
.previous.disable{
  cursor: auto;
  opacity: .5;
}

<ul class="nav">
<li class="show" data-cont="r1" >1</li>
<li data-cont="r2">2</li>
<li data-cont="r3">3</li>
</ul>


<section id="r1" class="section section-one active">
<h2>section 1</h2>
</section>
<section id="r2" class="section section-two">
<h2>section 2</h2>
</section>
<section id="r3" class="section section-three">
<h2>section 3</h2>
</section>
<button class="previous disable" id="previous">Previous</button>
<button class="next" id="next">Next</button>