Navigating divs with previous/next buttons

Question

I have this little website I am currently working on and what I want to do is navigating my divs through Previous/Next buttons. I managed to make it switch from one to another but somehow third div gets ignored and I don't know what I am missing.

Here's my snippet code:

      var nextbtn = document.getElementById("next-btn");
      var previousbtn = document.getElementById("previous-btn");
      var div1 = document.getElementById("div1");
      var div2 = document.getElementById("div2");
      var div3 = document.getElementById("div3");
      
      var i = 0;
      nextbtn.addEventListener("click", function () {
        i++;
        if (i == 1) {
          div1.style.display = "block";
          div2.style.display = "none";
          div3.style.display = "none";
        } else if (i == 2) {
          div1.style.display = "none";
          div2.style.display = "block";
          div3.style.display = "none";
        } else if (i == 3) {
          div1.style.display = "none";
          div2.style.display = "none";
          div3.style.display = "block";
        } else {
          console.log("you have reached the limit");
        }
      });

    body {
      display: flex;
      flex-wrap: wrap;
    }
    .div1,
    .div2,
    .div3 {
      width: 200px;
      height: 200px;
    }
    .div1 {
      display: block;
    }
    .div2,
    .div3 {
      display: none;
    }

    <div class="div1" id="div1" style="background-color: crimson">
      <button id="previous-btn">previous</button>
      <button id="next-btn">next</button>
    </div>

    <div class="div2" id="div2" style="background-color: rgb(20, 220, 87)">
      <button id="previous-btn">previous</button>
      <button id="next-btn">next</button>
    </div>

    <div class="div3" id="div3" style="background-color: rgb(113, 20, 220)">
      <button id="previous-btn">previous</button>
      <button id="next-btn">next</button>
    </div>

    <div class="buttons-controller">
      <button id="first-div">1</button>
      <button id="second-div">2</button>
      <button id="third-div">3</button>
    </div>

EDIT: Currently I am working only on "next" button, so the previous one is not working, yet.

Answer 1

You are selecting the next button by id, yet there are multiple next buttons on the page - so only the one in div1 gets selected.

Ids in a document are meant to be unique, you can read more about this here: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id

Select the button by class with something like document.querySelector('.next-button') and you should be able to handle the click in div2 as well.

Also make sure to initialize i to 1 as it would otherwise take two clicks to get to div2.