list checkbox's for each separate question with its own unique id

I can't get a list checkbox's for each separate question with its own unique id.

I would like to receive at each iteration only a list of checkboxes that belong to a certain div with a unique id.

    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function () {
        if (this.readyState === 4 && this.status === 200) {
            var questions = JSON.parse(this.responseText);
            document.getElementById('test').innerHTML = questions.map(question =>
                `<div class="question" id="${question.id}">
                    <div id="qustionText">${question.questionText}</div>
                    <div class="answers">${question.answers.map(answer =>
                    `<div id="${answer.id}"> <input type="checkbox" id="checkbox" class="checkbox" value="${answer.id}">` + answer.answerText).join('')}</div>
                    </div>`
            ).join('');
            console.log(questions);

        }
    };
    
      function getQuestions() {
        let questions = document.getElementsByClassName('question');
        let checkboxes;
        let questionCheckboxes = [];
            for (let i = 0; i < questions.length; i++) {
                let questionId = questions[i].id
                let quest = questions[i];
               checkboxes = quest.querySelectorAll(`#${CSS.escape(questionId)} input[type="checkbox"]`);
               for (let j = 0; j < checkboxes.length; j++) {
                   questionCheckboxes.push(checkboxes[j].value);
               }
        }
        return questionCheckboxes;
    }

<div id="test" class="test"></div>
<div id="sendAnswersButton"></div>

But then I get a list of checkboxes from all questions at once.

let questionId = questions[i].id
let quest = questions[i];
checkboxes = quest.querySelectorAll(`#${CSS.escape(questionId)} input[type="checkbox"]`);