How do I create multiple inputs after a button is clicked (Javascript)

I am new to javascript and I’m trying to make a web app that tests users and also lets them make tests. I’m currently focusing on the making-tests part of the web app. When the user enters the name of the test and the number of questions they want in the test, they click the button and then a javascript function should be called that has a loop that repeats for the number that they entered. In the loop a ‘question’ and an ‘answer’ input should be created. Here is the html for this feature:

<h3>Enter the name of the test you want to make:</h3><br>
<input type="text" name="testname" id="testnameID">
<h3>Enter the number of questions you want the test to have:</h3><br>
<input type="text" name="numofquestions" id="numID">
<button type="button" onclick="createNewElement()">Let's make it!</button>

And this is the function ‘createNewElement’ in javascript:

function createNewElement() {
    var testname = document.getElementById("testnameID").value;
    var numquestions = document.getElementById("numID").value;
    var numofquestions = parseInt(numquestions)
    
    for ( var i = 0; i < numofquestions; i++ ) {
        // This will loop the amount of times as the user input
        var questioninput = document.createElement("input");
        questioninput.type = 'text';
        questioninput.id = 'question' + i;
        var answerinput = document.createElement("input");
        answerinput.type = 'text';
        answerinput.id = 'answer' +i;
        
    }
}

From what I’ve read online I think this should work but I must have made some errors in what I’ve written. Any advice on how to do this successfully would be really appreciated.

Answer

You need the Template literals method to append the question(your input fields to the DOM)

Also, you need some element in your HTML, that will have all the multiple input fields.

Example:

<div id="question-paper"></div>

The above div will be your container where you can append n -number of fields you want.

function createNewElement() {
      var testname = document.getElementById("testnameID").value;
      var numquestions = document.getElementById("numID").value;
      var numofquestions = parseInt(numquestions)
      
      var questionAnswerHTML = "";
      for (var i = 0; i < numofquestions; i++) { 
         questionAnswerHTML += `
            <label for="question${i}">
               Question: ${i+1}
            </label>
            <br />
            <input type="text" 
                   id="question${i}"
                   placeholder="Type Question ${i+1} Here." />

           <br /><br />
           <label for="answer${i}">
               Answer: ${i+1}
           </label>
           <br />
           <input type="text" 
                  id="answer${i}" 
                  placeholder="Type Answer ${i+1} Here." />
           <br /><br />
       `;   
      } 
   document.getElementById("question-paper").innerHTML = questionAnswerHTML; 
}

<h3>Enter the name of the test you want to make:</h3>
<input type="text" name="testname" id="testnameID">

<h3>Enter the number of questions you want the test to have:</h3>
<input type="text" name="numofquestions" id="numID"> <button type="button" onclick="createNewElement()">Let's make it!</button>

<hr>
<div id="question-paper"> </div>