title: moving between section page using next and previous button in javascript
body: <p>In the same page I have multiple sections.</p>
  <p>One <code>section</code> will be shown and this will happen using an <code>active</code> <code>class</code>.</p>
  <p>In the same page I have <code>li</code> buttons 1, 2 and 3 and when I click on one of them the <code>section</code> related to it appears and the old one disappears. For that purpose I'm using Javascript.</p>
  <p>Also in the same page I have a next and previous button. When I click on the next button the next <code>section</code> should appear and the old one should disappear.</p>
  <p>And also the related <code>li</code> to the section should have the <code>active</code> <code>class</code>, the same thing for the previous: when I click on it it should go to the old <code>section</code> and the current should disappear and the <code>li</code> <code>class</code> should be <code>active</code>.</p>
  <p>When I'm in the first <code>section</code> the  previous button should disappear and when I'm in the last section the next button should disappear.</p>
  <p>How can I implement this behavior for the next and previous buttons in this way using Javascript?</p>
  <p>Any Help Please!!?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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) =&gt; {
      ele.addEventListener("click", function (e) {
          tabsArray.forEach((ele) =&gt; {
              ele.classList.remove("active");
          });
          e.currentTarget.classList.add("active");
          
          sectionArray.forEach((sec) =&gt; {
              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");
      });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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.active{
  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: none;
    opacity: .5;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul class="nav"&gt;
  &lt;li class="active" data-cont="r1"&gt;1&lt;/li&gt;
  &lt;li data-cont="r2"&gt;2&lt;/li&gt;
  &lt;li data-cont="r3"&gt;3&lt;/li&gt;
  &lt;/ul&gt;
  
  
  &lt;section id="r1" class="section section-one active"&gt;
  &lt;h2&gt;section 1&lt;/h2&gt;
  &lt;/section&gt;
  &lt;section id="r2" class="section section-two"&gt;
  &lt;h2&gt;section 2&lt;/h2&gt;
  &lt;/section&gt;
  &lt;section id="r3" class="section section-three"&gt;
  &lt;h2&gt;section 3&lt;/h2&gt;
  &lt;/section&gt;
  
  
  &lt;button class="previous disable" id="previous"&gt;Previous&lt;/button&gt;
  &lt;button class="next" id="next"&gt;Next&lt;/button&gt;
     </code></pre>
  </div>
  </div>
  </p>