'How to have multiple submit buttons for a quiz on one page

I'm creating a language quiz and it requires multiple submit buttons on one page through which one can check their answers. Having one submit button works fine. But so far, having multiple submit buttons creates issues where one submit button, when pressed, generates two (if there are 2 questions) of the same answers under both submit buttons. So after one click you will see 4 of the same answers. And only one submit button will be disabled. See scripts below for more info.

Below you'll find the html form for 1 of the quiz questions.

<form id="formId">
<h5>1. I am strong</h5>
<p>Translate the above sentence.</p>
<input type="text" id="q1" /><br><br>
<input type="submit" class="btn btn-outline-primary" id="submitId" value="Check answer" />
</form>

Below you'll find the javascript that gives the answer when submit button is clicked.

<script>
var answers = {
    "q1": ["Ik ben sterk"]
    
};
function markAnswers(){
    $("input[type='text']").each(function(){
        console.log($.inArray(this.value, answers[this.id]));
        if($.inArray(this.value, answers[this.id]) === -1){
            $(this).parent().append("<br>The correct answer: Ik ben sterk");
        } else {
            $(this).parent().append("<br><font style='color:green;'>Correct!</font>");
        }
    })
}
$("form").on("submit", function(e){
    e.preventDefault();
    markAnswers();
});
</script>

The script below is to make sure user cannot submit answer again.

<script>
var form = document.getElementById('formId');
var submitButton = document.getElementById('submitId');

form.addEventListener('submit', function() {

   // Disable the submit button
   submitButton.setAttribute('disabled', 'disabled');

   // Change the "Submit" text
   submitButton.value = 'Check answer';
            
}, false);
</script>

Above scripts are just for one question. If I add another question and I copy paste scripts and change the ID's to q2, formId2 and submitId2 it will not work as described earlier. What do I need to change to the scripts in order for this to work? Any suggestion is welcome. Thanks.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source