title: How to Call a JavaScript Function in a Mustache Template
body: <p>I am trying to call a JavaScript function in my mustache template, but I keep getting errors when using a script tag to call it. </p>
  
  <p>I have tried using escape tags on the script but it still does not work. I have searched around a bit and have not been able to find anything that helps with my problem.</p>
  
  <pre><code>&lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;Title&lt;/title&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;link href="main.css" rel="stylesheet" type="text/css"&gt; &lt;!--So far there may be multiple CSS pages to manage the overall layout --&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/3.0.1/mustache.min.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script&gt;
          function generateFields(amt){
              var htmlElements = "";
              for(var i = 0; i &lt; amt; i++)
              {
                  htmlElements += '&lt;div&gt;{{i}}: &lt;input type="text" class="inputAnswer"&gt;&lt;/div&gt;'
              }
          }
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;script id="studentAnswerTemplate"&gt;
          var data = {
              assignmentName: "Assignment 2",
              questionAmt: 5,
              generateFields: function(amt){
                  var htmlElements = "";
                  for(var i = 0; i &lt; amt; i++)
                  {
                      htmlElements += '&lt;div&gt;{{i}}: &lt;input type="text" class="inputAnswer"&gt;&lt;/div&gt;'
                  }
              }
          };
  
          var template = [
              '&lt;div class="container"&gt;',
              '&lt;div class="row"&gt;',
              '&lt;div class="jumbotron text-center"&gt;',
              '&lt;div class="col-4"&gt;&lt;/div&gt;',
              '&lt;div class="col-4 mx-auto text-center"&gt;',
              '&lt;img class="img-fluid" src="UTPB_LOGO.png" alt="n/a"&gt;',
              '&lt;/div&gt;',
              '&lt;div class="col-4"&gt;&lt;/div&gt;',
              '&lt;div class="row"&gt;&lt;/div&gt;',
              '&lt;h3&gt;{{assignmentName}}&lt;/h3&gt;',
              '&lt;/div&gt;',
              '&lt;nav class="navbar navbar-expand-sm"&gt;',
              '&lt;/nav&gt;',
              '&lt;/div&gt;',
              '&lt;br&gt;&lt;br&gt;',
              '&lt;div class="row"&gt;',
              '&lt;div class="col-md-3"&gt;',
              '&lt;br&gt;',
              '&lt;/div&gt;',
              '&lt;div class="col-md-5" id="middle"&gt;',
              '&lt;h2&gt;Answers&lt;/h2&gt;',
              '&lt;form action="/action_page.php"&gt;',
              '&lt;p&gt;Please answer each question to the best of your ability.&lt;/p&gt;',
              '&lt;div&gt;',
              '&lt;form action="/action_page.php"&gt;',
              /*need to autogenerate blanks using data from DB here*/
              '&lt;script&gt;{{generateFields(5)}}&lt;/script&gt;',
              /*here is where I run into issues ^^*/
              '&lt;/form&gt;',
              '&lt;/div&gt;',
              '&lt;button type="submit" class="btn btn-primary"&gt;Submit&lt;/button&gt;',
              '&lt;/form&gt;',
              '&lt;/div&gt;',
              '&lt;div class="col-md-4"&gt;',
              '&lt;/div&gt;',
              '&lt;/div&gt;',
              '&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;',
              '&lt;div class="row"&gt;',
              '&lt;footer class="page-footer font-small black"&gt;',
              '&lt;div class="footer-copyright text-center py-3"&gt;© 2019 Copyright --, All rights reserved',
              '&lt;br&gt;',
              '&lt;/div&gt;',
              '&lt;/footer&gt;',
              '&lt;/div&gt;',
              '&lt;/div&gt;'
          ].join("\n");
  
          var html = Mustache.render(template, data);
          $("body").append(html);
      &lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>I'm hoping to generate a number of text fields using this function, but I am unable to execute the function at this point in time. Thank you!</p>