Trying to create two multiple choice questions in one script

I am trying to create two multiple choice questions in one Javascript code but every way I try to edit it, it only reads the second question with the correct answer. How would I correct it so my first question is answered with Banana, Kiwi for the final product and the second one is Null.

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
</head>

<body>
  <h1>Which is the output?</h1><br>
  <h2>1. var fruits = ["Banana", "Orange", "Apple", "Kiwi"];<br> fruits.splice(1, 2);<br> document.getElementById("fruit").innerHTML = fruits;</h2>
  <form method="post" id="form1">
    <input type="radio" name="choice" value="Banana, Orange, Apple, Kiwi"> Banana, Orange, Apple, Kiwi
    <input type="radio" name="choice" value="Banana, Kiwi"> Banana, Kiwi
    <input type="radio" name="choice" value="Orange, Apple"> Orange, Apple
    <input type="radio" name="choice" value="Orange, Banana, Kiwi"> Orange, Banana, Kiwi
  </form>
  <button onclick="submitAnswer()">Submit Answer</button>
  <script type="text/javascript">
    var submitAnswer = function() {

      var radios = document.getElementsByName("choice");
      var val = "";
      for (var i = 0, length = radios.length; i < length; i++) {
        if (radios[i].checked) {
          val = radios[i].value;
          break;
        }
      }

      if (val == "Banana, Kiwi") {
        alert("Correct");
      } else {
        alert("Incorrect");
      }
    };
  </script>
  <h1>Which is the output?</h1><br>
  <h2>2. var girls = ["Lucy", "Amanda"];<br> var boys = ["Toby", "Charles", "Brian"];<br> var children = (null);<br> document.getElementById("child").innerHTML = children;</h2>
  <form method="post" id="form2">
    <input type="radio" name="option" value="Undefined"> Undefined
    <input type="radio" name="option" value="Toby, Charles, Brian"> Toby, Charles, Brian
    <input type="radio" name="option" value="Null"> Null
    <input type="radio" name="option" value="Lucy, Amanda"> Lucy, Amanda
  </form>
  <button onclick="submitAnswer()">Submit Answer</button>
  <script type="text/javascript">
    var submitAnswer = function() {

      var radios = document.getElementsByName("option");
      var val = "";
      for (var i = 0, length = radios.length; i < length; i++) {
        if (radios[i].checked) {
          val = radios[i].value;
          break;
        }
      }

      if (val == "Null") {
        alert("Correct");
      } else {
        alert("Incorrect");
      }
    };
  </script>

</body>

</html>

Solution

It's because you are using the same function name for both the click.I have also refactored your codes.Hope this helps.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head> 
<body>
    <h1>Which is the output?</h1><br><h2>1. var fruits = ["Banana", "Orange", "Apple", "Kiwi"];<br>
    fruits.splice(1, 2);<br>
    document.getElementById("fruit").innerHTML = fruits;</h2>
<form method="post" id="form1">
<input type="radio" name="choice" value="Banana, Orange, Apple, Kiwi"> Banana, Orange, Apple, Kiwi
<input type="radio" name="choice" value="Banana, Kiwi"> Banana, Kiwi
<input type="radio" name="choice" value="Orange, Apple"> Orange, Apple
<input type="radio" name="choice" value="Orange, Banana, Kiwi"> Orange, Banana, Kiwi
</form>
<button onclick="submitAnswer()">Submit Answer</button>
    
    <h1>Which is the output?</h1><br><h2>2. var girls = ["Lucy", "Amanda"];<br>
var boys = ["Toby", "Charles", "Brian"];<br>
var children = (null);<br>
document.getElementById("child").innerHTML = children;</h2>
<form method="post" id="form2">
<input type="radio" name="option" value="Undefined"> Undefined
<input type="radio" name="option" value="Toby, Charles, Brian"> Toby, Charles, Brian
<input type="radio" name="option" value="Null"> Null
<input type="radio" name="option" value="Lucy, Amanda"> Lucy, Amanda
</form>
<button onclick="submitAnswers()">Submit Answer</button>

</body>
<script type="text/javascript">
        var submitAnswer = function() {

  var radios = document.getElementsByName("choice");
  var val= "";
  for (var i = 0, length = radios.length; i < length; i++) {
      if (radios[i].checked) {
         val = radios[i].value; 
         break;
       }
  }

  if (val === "Banana, Kiwi") {
    alert("Correct");
  } else {
    alert("Incorrect");
  }
};
 var submitAnswers = function() {

  var radios = document.getElementsByName("option");
  var val= "";
  for (var i = 0, length = radios.length; i < length; i++) {
      if (radios[i].checked) {
         val = radios[i].value; 
         break;
       }
  }

  if (val === "Null") {
    alert("Correct");
  } else {
    alert("Incorrect");
  }
};
    </script>
</html>