using for loop to create html elements
<p>What is wrong with my code? It is supposed to create input tags in html with using the incoming number (quantity):</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>// Declare variables
var numberOfGrades = 0;
var NL = "\n";



// Functions
function setQuantity() {
  numberOfGrades = document.getElementById("quantity").value;

  var inputBox = document.createElement("INPUT");
  var BR = document.createElement("br"); // Break line
  var gradeNumber = 1;
  var gradeText = document.createTextNode("Grade " + gradeNumber + ":");

  for (var i = 0; i &lt; numberOfGrades; i++) {
    alert(numberOfGrades);
    document.getElementById("formDiv").appendChild(BR);
   document.getElementById("formDiv").appendChild(gradeText);
    document.getElementById("formDiv").appendChild(inputBox);
    gradeNumber++;
  }


}</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>body {
  font-family: "Open Sans", sans-serif;
}
.container {
  width: 100%;
  background-color: lightcyan;
  padding: 10px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;

  &lt;h1&gt;Homework and Quiz average calculator&lt;/h1&gt;

  &lt;p&gt;Please Enter the required information to calcuate&lt;/p&gt;
  &lt;div class="container" id="formDiv"&gt;
    &lt;form id="formID"&gt;
      &lt;p&gt;
        &lt;strong&gt;Calculate the average of homework grades&lt;/strong&gt;
      &lt;/p&gt;
      How many grades?
      &lt;input type="number" id="quantity" name="quantity" min="1" max="10" value="1"&gt;
      &lt;!--&lt;input onclick="setQuantity()" type="submit" value="Apply"&gt;--&gt;
    &lt;/form&gt;
    &lt;button onclick="setQuantity()"&gt;APPLY&lt;/button&gt;
    &lt;br&gt;
  &lt;/div&gt;

  &lt;script src="script.js"&gt;&lt;/script&gt;

&lt;/body&gt;</code></pre>
</div>
</div>
</p>

<p><a href="https://jsfiddle.net/yrfuwoej/" rel="nofollow">JSFiddle here</a></p>