for文を使用して、ループさせたいです。

前提・実現したいこと

html, css, javascriptを使用して、
簡単な記憶力テストを作っています。

発生している問題・エラーメッセージ

for文で、５つの問題文と選択肢を作ったのですが、
５つ全てが画面いっぱいに出てきます。

私のイメージとしては、ボタンを選択して、nextボタンを押した後に、
次の問題を表示したいと考えています。
どのように書いたら宜しいでしょうか。

該当のソースコード

ソースコード
javascript

const $docs = document;
const matches = 0
let questionPanel = $docs.getElementsByClassName('question')[0]



async function getQuestions () {
    let result = await fetch('questions.json')
    let question_list = await result.json();

    return question_list;
}

function displayQuestions(question_list) {
    let questions = question_list.questions
    
    for(let i = 0; i < questions.length; i++){
        var question = questions[i].question
        var answer = questions[i].answer
        var choices = questions[i].fields
        var choice1 = choices.a
        var choice2 = choices.b
        var choice3 = choices.c
        var choice4 = choices.d
        
        
        
        let div = $docs.createElement('div')
        div.innerHTML = `
        <ul class="ul">
            <h3>Q${i + 1}. ${question}</h3>
            <div class="li">
                <li>A. <input type="button" class="option" value="${choice1}"></input></li>
                <li>B. <input type="button" class="option" value="${choice2}"></input></li>
                <li>C. <input type="button" class="option" value="${choice3}"></input></li>
                <li>D. <input type="button" class="option" value="${choice4}"></input></li>
            </div>          
        </ul>

        <a href="#" class="btn-circle-fishy">Next</a>
        `
        questionPanel.appendChild(div)


        // button choices
        let buttons = $docs.getElementsByClassName('option')
        let next = $docs.getElementsByClassName('btn-circle-fishy')[0]

        if(i = 0) {
            addClass()

            doAll()
        }

        function doAll () {
            for(let j = 0; j < buttons.length; j++){
                buttons[j].addEventListener('click', function() {
                buttons[j].classList.add('optionclicked')
                next.addEventListener('click', function() {
                    if(answer === buttons[j].value) {
                        matches += 1
                    }

                    removeClass()

                    displayNext()

                })
            })
        }

        }

        function displayNext () {
            div[i+1].classList.add('pressed')
        }

        function removeClass () {
            let divget = $docs.getElementsByClassName('pressed')[0]
            divget.classList.remove('pressed')
        }

        function addClass() {
            let ul = $docs.getElementsByClassName('ul')
            ul[i].classList.add('pressed')
        }

    }
}



$docs.addEventListener('DOMContentLoaded', getQuestions().then(question_list => displayQuestions(question_list)));

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Memory Test</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header class="header">
        <h2>Memory Test</h2>
    </header>

    <div class="question"></div>

    <footer class="footer">
        Keep your brain working!
    </footer>


    <script src="app.js"></script>
    
</body>
</html>

json
{
    "questions": [
        {
            "question": "How many chairs are there?",
            "fields": {
                "a": 1,
                "b": 2,
                "c": 3,
                "d": 4           
            },
            "answer": 1
        },
        {
            "question": "How many lights are there?",
            "fields": {
                "a": 1,
                "b": 2,
                "c": 3,
                "d": 4           
            },
            "answer": 3
        },
        {
            "question": "What is it on the sofa?",
            "fields": {
                "a": "person",
                "b": "stove",
                "c": "cushions",
                "d": "Beats me"           
            },
            "answer": "cushions"
        },
        {
            "question": "Where is the light bulb?",
            "fields": {
                "a": "desk",
                "b": "table",
                "c": "ceiling",
                "d": "Beats me"           
            },
            "answer": "table"
        },
        {
            "question": "How many questions have you answered?",
            "fields": {
                "a": 1,
                "b": 2,
                "c": 3,
                "d": 4           
            },
            "answer": 3
        }
    ]
}