I'm working on a game like Kahoot and I'm using the forEach function on a DataSnapshot to loop through every question. The problem is that since there's no way to sort of "yield", it just skips to the last question. How could you sort of "yield", and then once a certain action happens, (when they click any of the four options) then just do sort of "continue". I've tried the yield operator in the forEach loop and it DID actually pause at the first question, however doing continue or anything like that would not work. Here is my code:

snapshot.forEach(function(item) {
    var ol = Object.values(item.val().Options)
    var olk = Object.keys(snapshot.val())

    var q = "Question " + olk[questionIndex].split("Question")[1] + ": " + item.val().Question

    document.getElementById("theQuestion").innerText = q

    questionIndex++

    for (var i = 0; i < answerBtns.length; i++) {
        answerBtns[i].innerText = ol[i]
    }

    document.querySelector(".qna-section").addEventListener('click', (e) => {
        if (e.target.nodeName.toLowerCase() != "button") return;

        if (e.target.innerText == item.val().CorrectAnswer) {
           console.log("Question index " + questionIndex + ": Correct!")
        } else {
           console.log("Question index " + questionIndex + ": Incorrect.")
        }

        // I want it to sort of "continue" here.
    })

    // I want to sort of "yield" here.
})

I've been stuck on this for about a week, so help would be appreciated! Thanks.