using queryselector to select something from a innerhtml inside a component from the main javascript file

Question

I'm finishing a school project but I ran into a problem. I got the feeling it's just something really simple that I just forgot. But I need to add 4 faq question and answers. But right now it is adding 4 separate sections instead of 1 section with the 4 faq question and answers.

Index file

import Component from "../components/Component.js";
import QuestionComponent from "../components/QuestionComponent.js";


window.addEventListener("load", (e) => {
    let index = new IndexController();
    index.init();
});

class IndexController {

    init() {

        let questions = [{
            question: 'vraag1',
            answer: 'antwoord1'
        }, {
            question: 'vraag2',
            answer: 'antwoord2'
        }, {
            question: 'vraag3',
            answer: 'antwoord3'
        }, {
            question: 'vraag4',
            answer: 'antwoord4'
        }
        ];

        for (let i = 0; i < questions.length; i++) {
            const q = questions[i];
            const question = this.rootElement;
            this.qComponent = new QuestionComponent(q.question, q.answer);
            // Voeg vervolgens de qComponent toe aan de section  
            document.querySelector('main"]').append(this.qComponent.getView());
        }
    }
}

It kind of only is about the last line because I probably just need something else instead of document.

Component File

import Component from "./Component.js"

export default class QuestionComponent extends Component {

    constructor(question, answer) {
        super("section");
        this.rootElement.id = "faq";
        this.rootElement.classList.add("faqSection");

        this.vraag = question;
        this.antwoord = answer;

        this.initView(this.vraag, this.antwoord);
    }


    initView() {
        this.rootElement.innerHTML = `
            <h2>FAQ Component</h2>
            <div class="faqComponent">
                <p class="firstQuestion question">${this.vraag}</p>
                <p class="firstAnswer">${this.antwoord}</p>
            </div>`;



        let el = this.querySelector('question');
        el.addEventListener('click', (event) => {
            this.onClick(event)
        });

    }

    onClick() {
        console.log("onClick functie wordt aangeroepen.");

        let answer = this.querySelector('firstAnswer');
        answer.classList.toggle('hidden');
    }
}

could probably also be something wrong with this so I thought I'd just include it so you can understand it better I guess.