title: Calculation form returning error or blank page
body: <p>I'm trying to create a form that shows the cartesian product of 2 sets that will be given by the user.</p>
  
  <p>For some reason, it's not working...</p>
  
  <p>Snippet:</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>    function cartesianProductOf() {
          return _.reduce(arguments, function(a, b) {
              return _.flatten(_.map(a, function(x) {
                  return _.map(b, function(y) {
                      return x.concat([y]);
                  });
              }), true);
          }, [ [] ]);
      };
      
      $(document).ready(function(){
        $("#calculate").click(function(){
      
          document.body.appendChild(form);
      
          var setone = $("#setoneinput").value;
          var settwo = $("#settwoinput").value;
      
          console.log(setone);
          console.log(settwo);
      
      
          // document.write ( cartesianProductOf($setone,$settwo) );
          console.log("Clicked");
      
        });
      });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;div class="container inputs-container"&gt;
    &lt;form&gt;
      &lt;div class="row"&gt;
        &lt;div class="form-label-group col-sm-6 input-div"&gt;
          &lt;input type="text" class="form-control" id="setoneinput" name="setone" placeholder="Set One"&gt;
        &lt;/div&gt;
        &lt;div class="form-label-group col-sm-6 input-div"&gt;
          &lt;input type="text" class="form-control" id="settwoinput" name="settwo" placeholder="Set Two"&gt;
        &lt;/div&gt;
        &lt;small class="notice"&gt;Please insert a comma between each set element&lt;/small&gt;
        &lt;div class="form-label-group col-sm-12 calculate-button-container"&gt;
          &lt;span formtarget="_blank" class="calculate-button" id="calculate" name="Calculate"&gt;&lt;i class="fas fa-calculator"&gt;&lt;/i&gt;&lt;/span&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/form&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Note that the js is in a different file called scripts.js</p>
  
  <p>The error I'm getting is: </p>
  
  <blockquote>
    <p>Uncaught ReferenceError: form is not defined
        at HTMLSpanElement. (scripts.js:14)
        at HTMLSpanElement.dispatch (jquery-3.3.1.slim.min.js:2)
        at HTMLSpanElement.v.handle (jquery-3.3.1.slim.min.js:2)</p>
  </blockquote>