How can I get my for loop to continue iterating through my li elements?

Question

I am fairly new to JavaScript, and I am trying to work on a MadLib generator. I have a list of questions to prompt the user for input. I want to show one li element at a time so I have a for loop to iterate through the li and change the classList from active/ notActive when the user clicks the next button. I have gotten it to display the first li element and then change it to notActive once the button is clicked, but I can't figure out how to iterate onto the next li element and change that classList to active. After I click the button no li elements are shown.

Code:

let allBtns = document.querySelector("button");
console.log(allBtns);

let activeListToggle = document.getElementsByTagName('li');
console.log(activeListToggle);

function showQuestions() {
  for (let i = 0; i < activeListToggle.length; i++) {
    console.log(activeListToggle[i]);
    activeListToggle[i].addEventListener('click', function nextQuestion() {
      console.log(this.classList);
      if (this.className === 'active') {
        this.classList.toggle('notActive');
      } else if (this.className === 'notActive') {
        this.classList.toggle('active');
      }
    })
  }
}

showQuestions();

.notActive {
  display: none;
}

<form>
  <ul>
    <li class="active">
      <label>Noun</label>
      <input id="nn1" type="text">
      <button id="next-btn" type="button">Next</button>
    </li>
    <li class="notActive">
      <label>Verb</label>
      <input id="vb1" type="text">
      <button id="next-btn" type="button">Next</button>
    </li>
    <li class="notActive">
      <label>Adverb</label>
      <input id="avb1" type="text">
      <button id="next-btn" type="button">Next</button>
    </li>
    <li class="notActive">
      <label>Adjective</label>
      <input id="adj2" type="text">
      <button id="next-btn" type="button">Next</button>
    </li>
    <li class="notActive">
      <label>noun</label>
      <input id="nn2" type="text">
      <button id="next-btn" type="button">Next</button>
    </li>
    <li class="notActive">
      <label>noun</label>
      <input id="nn3" type="text">
      <button id="next-btn" type="button">Next</button>
    </li>
    <li class="notActive">
      <label>Adjective</label>
      <input id="adj3" type="text">
      <button id="next-btn" type="button">Next</button>
    </li>
    <li class="notActive">
      <label>Verb</label>
      <input id="vb2" type="text">
      <button id="next-btn" type="button">Next</button>
    </li>
    <li class="notActive">
      <label>Adverb</label>
      <input id="avb2" type="text">
      <button id="next-btn" type="button">Next</button>
    </li>
    <li class="notActive">
      <label>Verb (past tense)</label>
      <button id="next-btn" type="button">Next</button>
    </li>
    <li class="notActive">
      <label>Adjective</label>
      <input id="adj4" type="text">
      <button id="submit-btn" type="button">Submit Your Answers</button>
    </li>
  </ul>
</form>