Untitled

<!doctype html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
    <title>Surveys</title>
</head>
<html lang="en">
<body>
<script>
    function onClick() {
        var a = document.getElementsByClassName('question')
        for (var i = 0; i < a.length; i++) {
            b = a[i].getElementsByClassName('answer')
            for (var j = 0; j < b.length; j++){
                c = b[j].getElementsByTagName('input')
                console.log(c)
            }
                // fetch(
                //     'http://localhost:8000/complete_survey/create/',
                //     {
                //         method: 'POST',
                //         headers: new Headers(),
                //         body: JSON.stringify({survey_id: {{ survey.id }}, user_id: 1, question_id: a[i].id , answer_id: a[i]})
                //     }
                // ).then((res) => console.log(res))
        }
    }
</script>
    {% for question in questions %}
        <div class="question" id="{{ question.id }}">
        <p>{{ question.content }}</p>
            {% for answer in answers %}
                {% if answer.question_id == question.id %}
                <div class="answer" id="{{ answer.id }}">
                    <input type="checkbox">
                    {{ answer.content }}
                    <p></p>
                </div>
            {% endif %}
        {% endfor %}
        </div>
    {% endfor %}
    <p><button name="foo" value="foo" onclick="onClick()">Submit</button></p>
</body>
</html>