Как изменить содержимое модального окна с помощью функции javascript?

Привет, я делаю модуль викторины. В котором студент может пройти тест. после отправки, если викторина не пройдена, студенты могут «пересдать тест». После того, как учащиеся нажмут «повторно пройти викторину», будут отображаться только вопросы, на которые пользователь дал неправильный ответ. Я использую модальные окна php и HTML для первого показа вопросов, когда студент проходит тест. Вместо использования jquery и javascript я передаю ответы пользователя бэкэнду и проверяю, прошел ли он или нет. В случае неудачи у меня неправильный идентификатор вопросов, который я хочу отображать, когда они берут запрос. После кода:

Index.php

//When user clicks this button, modal will be pop-up and questions will be displayed one by one.
<a href = "#" class = "btn btn-danger btn-lg" data-toggle = "modal" data-target = "#Quiz" id = "start-quiz">Start Quiz</a>


<!-- Quiz Modal -->
<div class = "modal fade quiz-modal" id = "Quiz">
    <div class = "modal-dialog modal-lg">
        <div class = "modal-content">
            <? foreach ($questions as $i=>$question) { ?>
            <div class='question'>
                <div class = "modal-header">
                    <div class = "row">
                        <h4>QUIZ</h4>
                    </div>
                </div>
                <div class = "modal-body">
                    <div class = "row">
                        <div id = "quest-content" class = "quest">
                            <h4 class = "question-title"><?=$question->number?>) <?=$question->title?></h4>
                            <ul class = "list-unstyled">
                                <? foreach ($question->getAnswers() as $answer) { ?>
                                    <li>
                                        <div class = "checkbox">
                                                <input class = "cb" type = "checkbox" name = "answer[]" value = "<?=$answer->title?>">
                                                <?=$answer->title?> 
                                        </div>
                                    </li>
                                <? } ?> 
                            </ul>
                            <br>
                            <br>
                            <p class='error'>Please select an answer</p>
                        </div>
                    </div>
                </div>
                <div class = "modal-footer">
                    <p class='quest_num'><?=$question->number?> of <?=count($questions)?></p>
                    <?  if ( count($questions) === 1 ) { ?>
                        <a class = "btn button btn-lg quiz-btn">Submit Quiz</a>
                    <? } else if ( count($questions) === $i +1 ) { ?>
                        <a class = "btn button btn-lg quiz-btn">Submit Quiz</a>
                    <? }  else { ?>
                        <a href = "" class = " btn button btn-lg quiz-btn">Next Question</a>
                    <? } ?>
                </div>
            </div>
            <? } ?>
        </div>
    </div>
</div>

Ниже приведен <script>, где я делаю несколько вещей: если есть еще вопросы, кнопка будет показывать «Далее», а если это последний вопрос, кнопка покажет «Отправить». После отправки викторины он отправит ответы пользователя на серверную часть через $.post и вернет массив неверных идентификаторов вопросов. Используя эти неправильные идентификаторы вопроса, когда пользователь нажимает «Повторно пройти тест», он должен снова отображать тест только с этими идентификаторами.

<script type = "text/javascript">
$(document).on('ready', function(){
    var answers = [];
    $('.quiz-btn').click(function(e){
        e.preventDefault()
        var checkbox = $(this).parents('.question').children('.modal-body').children('.row').children('.quest').children('ul').children('li').children('.checkbox').children('.icheckbox_square');
        var btn = $(this).parents('.question').children('.modal-footer').children('.quiz-btn')
        var next = false
        var submit = false
        console.info(checkbox)
        $(checkbox).each(function(){
            if ( $(this).hasClass('checked') && $(btn).html() == 'Next Question' ) {
                answers.push($(this).children('.cb:checked').val());
                console.info(answers);
                next = true
            } 
            else if ($(this).hasClass('checked') && $(btn).html() == 'Submit Quiz') {
                answers.push($(this).children('.cb:checked').val());
                submit = true
            }
        });

        if ( next ) {
            e.preventDefault();
            $(this).parents('.question').slideUp(500);
            $(this).parents('.question').next('.question').delay(500).slideDown(500);
        } else if ( submit ) {
            e.preventDefault();
            $.post('/student/submit_quiz',{answers: answers, module: <?=$model->course_module->id?>}, function(data){
                var correct = data['correct'];
                var incorrect = data['incorrect'];

                if (incorrect){
                    if (incorrect.length > 0){
                        var div = $('.quest')[$('.quest').length - 1];
                        var footer = $('.modal-footer')[$('.modal-footer').length - 1];
                        var progress = (correct.length*100)/(<?=count($questions)?>);
                        div.innerHTML = "<h4 class='question-title'>" + (correct.length)+"/<?=count($questions)?> questions correct <h4>";
                        div.innerHTML += "<div class='error'><p><strong>We are sorry but you have " + incorrect.length +" answers incorrect</strong><br>Please go back and review and reanswer those questions.</p></div>";
                        footer.innerHTML = "<a onclick='retakeQuiz(["+incorrect+"])' class='btn btn-success btn-lg quiz-btn'>Retake Quiz</a>";
                    } else {
                        var div = $('.quest')[$('.quest').length - 1];
                        var footer = $('.modal-footer')[$('.modal-footer').length - 1];
                        var progress = (correct.length*100)/(<?=count($questions)?>);
                        div.innerHTML = "<h4 class='question-title'> Congratulations!! You Passed this Module.<h4>";
                        footer.innerHTML = "<a href='/student/course/<?=$model->course->id?>' class='btn btn-default btn-lg'>Continue</a>";
                    }
                }
            });
        } else {
            console.info(next)
            $('.quest .error').fadeIn();
        }
    });
});

function retakeQuiz(incorrect) {
    $.each(incorrect, function(key, val) {
        alert('index ' + key + ' points to file ' + val);
        //Here incorrect is the array of Wrong Question's IDs. How can I use that id to show only this questions in my above modal. 
    });
}
</script>

Я хотел бы знать вас всех, что у меня есть только один модальный, который показывает вопросы викторины один за другим, и когда тест завершен и пользователь отправит тест, он покажет сообщение о прохождении или неудаче вместе с соответствующей кнопкой, говорящей «Продолжить 'или' Пройдите тест еще раз '. Если нажать кнопку «Повторно пройти тест», в модальном окне будут отображаться неправильные вопросы. Итак, у меня есть только один модальный код, но я просто динамически меняю содержимое с помощью javascript.

Я изо всех сил старался объяснить свой вопрос и код. Надеюсь на помощь. Помощь очень ценится.