title: MathJax is duplicating my equations -- why and how can I fix this?
body: <p>I have the following page (css useless--omitted):</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=en&gt;
      &lt;head&gt;
          &lt;meta charset="UTF-8"&gt;
          &lt;title&gt;Command Line&lt;/title&gt;
          &lt;script type="text/x-mathjax-config"&gt;
          MathJax.Hub.Config({
              extensions: ["http://cs.jsu.edu/mathjax-ext/contrib/forminput/forminput.js"],
              tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]},
              TeX: {extensions: ["AMSmath.js","AMSsymbols.js"]}
          });
          &lt;/script&gt;
          &lt;script type="text/javascript" src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"&gt;&lt;/script&gt;
          &lt;script src="http://code.jquery.com/jquery-1.10.2.js"&gt;&lt;/script&gt;
          &lt;script src="!!IMPORTANT_JS!!.js"&gt;&lt;/script&gt;
          &lt;script src="theta.js"&gt;&lt;/script&gt;
          &lt;script src="cmd.js"&gt;&lt;/script&gt;
          &lt;link rel="STYLESHEET" type="text/css" href="styles.css"&gt;
      &lt;/head&gt;
      &lt;header&gt;
          &lt;h1 id="title"&gt;COMMAND LINE v.2.0&lt;/h1&gt;&lt;span id="copy"&gt;&amp;copy; 2015 ~ Conor O'Brien&lt;/span&gt;
      &lt;/header&gt;
      &lt;body&gt;
          &lt;div id="subtitle"&gt;Now with $\LaTeX$!&lt;/div&gt;
          &lt;div id="out"&gt;&lt;/div&gt;
          &lt;h3 id="sQ"&gt;&lt;/h3&gt;
      &lt;/body&gt;
      &lt;footer&gt;
          &lt;input type="text" id="cmd"&gt;
          &lt;input type="color" id="col"&gt;
          &lt;div id="left"&gt;&amp;gt;&amp;gt;&lt;/div&gt;
      &lt;/footer&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>JavaScript:</p>
  
  <pre><code>$( document ).ready(function(){
      window.t = false;
      $("#col").on("change",function(){
          var d = $q(this).value;
          $q("#out").innerHTML+="&lt;p&gt;Color: &lt;span style=\"color: "+d+";\"&gt;"+d.toUpperCase()+", "+Color.hexToRgb(d).v+" - "+linkC("/color "+d,"Use")+"&lt;/span&gt;.&lt;/p&gt;";
      });
      $("#cmd")[0].addEventListener("keypress",function(e){
          if(e.key=="Enter"){
              submit();
          }
      });
      $("#out").html("Initializing...");
      window.init = function(){
          var d = [br(3)+
                  "********* INITIALIZED *********",
                  "* Welcome to the experimental *",
                  "* JavaScript command line! It *",
                  "* will execute exactly like a *",
                  "* handheld calculator, having *",
                  "* the capacity to execute the *",
                  "*        user's inputs.       *",
                  "*                             *",
                  "* ~-~-~-~-~-~-~-~-~-~-~-~-~-~ *",
                  "*                             *",
                  "* Type 'help' for environment *",
                  "*           commands.         *",
                  "*******************************"+br(),
                  "&lt;hr&gt;"],i=0;
          function x(d,i){
              $q("#out").innerHTML += (d[i++])||"";
              $q("#out").innerHTML += br();
              if(i&lt;d.length){ setTimeout(x,20,d,i); } else {
                  window.t = true;
              }
          }
          setTimeout(x,500,d,i);
      }
      init();
  });
  
  function br(x){
      var o = "",x=x||1;
      for(i=0;i&lt;x;i++){
          o+="&lt;br&gt;";
      }
      return o;
  }
  
  function $q(i){
      return $(i)[0];
  }
  
  function submit(){
      if(t){
          var $out = getOutput();
          if($out){
              var d = "&lt;p id='a"+(el++)+"'&gt;"+$out+"&lt;/p&gt;";
              $q("#out").innerHTML += d;
              lines.push(d);
              marker = lines.length;
              location = "file:///C:/Users/Conor%20O%27Brien/Documents/Programming/command%20line%20v.2.0/main.html#sQ";
              $q("#cmd").focus();
              console.log(el);
              MathJax.Hub.Queue(["Typeset",MathJax.Hub,"a"+el+""]);
          }
      }
  }
  
  var pi = Math.PI;
  var e  = Math.E;
  
  function Reval(str){
      with(Math){var tstr = str.replace(/(.+)\^(.+)/g,"Math.pow($1,$2)");return eval(tstr);}
  }
  
  function Dval(str){
      return "$"+str.replace(/(.+)\^(.+)/g,"{$1}^{$2}")+"$";
  }
  
  var el = 0;
  
  function getOutput(){
      var val = $q("#cmd").value;
      if(val=="help"){
          $q("#out").innerHTML = "";
          return "&lt;h1&gt;HELP&lt;/h1&gt;&lt;h2&gt;Commands&lt;/h2&gt;"+
          [
              "= help",
              "  - displays help document.",
              "= open {target}",
              "  - displays {target}'s contents.",
              "  - {target} values:",
              "    * options: adjust options with subpoints (i.e. options.{prop} = {1/0} [1=True,0=False])"
          ].join(br())+"&lt;hr&gt;";
      } else if(val=="cls"||val=="clear"){
          $q("#out").innerHTML = "";
          return "Cleared.";
      } else if(val.substr(0,5)=="open "){
          var target = val.substr(5,val.length);
          console.log(target);
          switch(target){
              case "options":
  
              break;
              default:
                  return new Error(target+" is not a valid target!");
              break;
          }
      } else {
          try {
              console.log(val,Reval(val));
              return Dval(val)+br()+"&lt;span class='ans'&gt;"+Reval(val)+"&lt;/span&gt;";
          } catch(e) {
              return e;
          }
      }
  }
  </code></pre>
  
  <p><hr>
  Upon executing, this (ideally) will able to be evaluate the user's input (i.e. <code>sin(3)</code> or <code>3 + 5^3 / 99.3</code>). This code does this successfully, though displaying it is trickier. I am using MathJax to display the math correctly, and using <code>MathJax.Hub.Queue(["Typeset",MathJax.Hub,"a"+el+""]);</code> to target the element <code>a{number}</code> and redo its MathJax. This somehow refreshes the entire page and furthermore, after a few entries into the input, will start to duplicate the previous equations.</p>
  
  <p>I have narrowed it down to what I believe would be the solution: MathJax has two observable phases.</p>
  
  <ol>
  <li>It formats the equations, then</li>
  <li>It applies fonts.</li>
  </ol>
  
  <p>The MathJax function only seems to perform these two steps in my code twice: once, at the beginning, and once, when the function is first executed.</p>
  
  <p>My question is, how can I fix this? I've been trying to fix this, but to no avail.</p>