Тест JavaScript с несколькими вопросами

Ниже я сделал небольшую викторину с 4 вопросами и вопросы 2,3 и 4 скрыты с помощью CSS, но вы можете попробовать удалить стиль из CSS (".pytja2, .pytja3, .pytja4 { display: none;}") чтобы увидеть все вопросы или поставить стиль display: hidden к каждому вопросу по одному и вы их увидите.

Я сделал это, потому что я хотел бы показать следующий вопрос, когда я нажимаю кнопку Следующий, тогда следующий вопрос будет отображаться после того, как я каждый раз нажимаю кнопку Следующий. Но у меня есть проблема с вопросом 2, который не отображается, и он не показывает никаких ошибок в журнале консоли, и я добавил в JavaScript функцию, которая, когда я нажимаю кнопку «Далее», первый вопрос будет скрыт, и он покажет следующий вопрос, но я не знаю, что не так.

<div class = "quiz">
        <div id = "pytja1">
         <span class = "quest1">I am a ?</span> 
        <form class = "questions1" action = "">
          <input class = "correct" type = "radio" name = "gender" value = "male"> Male<br>
          <input type = "radio" name = "gender" value = "female"> Female<br>
          <input type = "radio" name = "gender" value = "other"> Other<br>  
          <input id = "bot" type = "button" value = "Next">
        </form>
      </div>
      <div id = "pytja2">
        <span class = "quest2">Football has letters ?</span> 
        <form class = "questions2" action = "">
          <input class = "correct" type = "radio" name = "gender" value = "male"> 7<br>
          <input type = "radio" name = "gender" value = "female"> 5<br>
          <input type = "radio" name = "gender" value = "other"> 6<br>  
          <input id = "bot" type = "button" value = "Next">
        </form>
      </div>
      <div id = "pytja3">
        <span class = "quest3">VV stands for ?</span> 
        <form class = "questions3" action = "">
          <input type = "radio" name = "gender" value = "male"> BMW <br>
          <input class = "correct" type = "radio" name = "gender" value = "female"> Volksvagen<br>
          <input type = "radio" name = "gender" value = "other"> Audi<br>  
          <input id = "bot" type = "button" value = "Next">
        </form>
      </div>
      <div id = "pytja4">
        <span class = "quest4">What year it is ?</span> 
        <form class = "questions4" action = "">
          <input type = "radio" name = "gender" value = "male"> 2017<br>
          <input type = "radio" name = "gender" value = "female"> 2015<br>
          <input class = "correct" type = "radio" name = "gender" value = "other"> 2019<br>  
          <input id = "bot-submit" type = "submit" value = "Submit">
        </form>
      </div>
      </div>

.quiz{
  margin-top: 50px;
  margin-left: 40%;
  width: 250px;
  height: 100px;
  background-color: coral;
}
.quest1{
  background-color: cadetblue;
  padding-right: 50px;
  margin-left: 30px;
  font-size: 22px;
}
.quest2{
  background-color: cadetblue;
  padding-right: 50px;
  margin-left: 30px;
  font-size: 22px;
  position: absolute;
  top: 3884px;
}
.quest3{
  background-color: cadetblue;
  padding-right: 50px;
  margin-left: 30px;
  font-size: 22px;
  position: absolute;
  top: 3884px;
}
.quest4{
  background-color: cadetblue;
  padding-right: 50px;
  margin-left: 30px;
  font-size: 22px;
  position: absolute;
  top: 3884px;
}
.questions1{
  margin-left: 28px;
  background-color: cyan;
  width: 220px;
  padding: 10px;
  font-size: 20px;
}
.questions2{
  margin-left: 28px;
  background-color: red;
  width: 150px;
  padding: 10px;
  font-size: 20px;
  position: absolute;
  top: 3925px;
}
.questions3{
  margin-left: 28px;
  background-color: greenyellow;
  width: 150px;
  padding: 10px;
  font-size: 20px;
  position: absolute;
  top: 3925px;
}
.questions4{
  margin-left: 28px;
  background-color: olivedrab;
  width: 150px;
  padding: 10px;
  font-size: 20px;
  position: absolute;
  top: 3925px;
}
.bot{
  margin-top: 10px;
}
.pytja2,.pytja3,.pytja4{
  display: none;
}
/* End of Quiz*/

let question2 = document.getElementById('pytja2');
let question3 = document.getElementById('pytja3');
let question4 = document.getElementById('pytja4');
let nextQuestion = document.getElementById('bot');
let result = document.getElementById('bot-submit');


nextQuestion.onclick = function () {
    if (nextQuestion === question1) {
        question1.style.display = 'none'
    } else if (nextQuestion === question2) {
        question2.style.display = 'block'
   }
}