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.

Answer

Your markAnswers function is looping through all inputs, that’s why you’re getting the answers for all of them when you click any of the buttons.

You can fix this by changing the id of the forms to be like formId1, formId2 etc., then giving that id to the markAnswers function.

Example:

function markAnswers(id) {
  $(`#q${id}`).each(function () {
    if ($.inArray(this.value, answers[this.id]) === -1) {
      $(this).parent().append(`<br>The correct answer: ${answers[this.id]}`);
    } else {
      $(this).parent().append("<br><font style='color:green;'>Correct!</font>");
    }
  });
}

$("form").on("submit", function (e) {
  e.preventDefault();
  const id = e.target.id.replace("formId", "")
  markAnswers(id);
});

Additionally, you can disable the button in the same submit event as well:

$("form").on("submit", function (e) {
  ...

  $(`#submitId${id}`).each(function () {
    this.setAttribute('disabled', true);
    this.value = "Check answers"
  })
  
});

Here’s a working example: Codesandbox