Unable to render some equations from latex to html using Mathquill

<!DOCTYPE html>
<html>
   <head>
      <title>Mathquill</title>      
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />      
      <link rel="stylesheet" type="text/css" href="mathquill-0.9.4/mathquill.css">
      <script src="jquery-1.9.1.min.js"></script>
      <script src="mathquill-0.9.4/mathquill.min.js"></script>
     <script>
     function clickMe()
     {       
     $('#taOne').mathquill('latex', 'x^2');
     $('#taTwo').mathquill('latex', '\int x');
     $('#taThree').mathquill('latex', '\left(x^2 + y^2 \right)');
     }
     </script>   
</head>
   <body style="height: auto">             
      <div id="MathOutput" style="display: none">$$ {} $$</div>      
        <div id="MathList" style="font-size:30px;background-color:LightSeaGreen;height: auto;line-height: 1.4;font-family: "Museo Sans",sans-serif; margin-bottom: 3px;" />    
         <div id="Ans1" class="mathquill-embedded-latex" style="background-color:yellow;text-align:left;font-size:30px;height: auto"></div>
         <input type="button" value="ClickMe" onclick="clickMe();"/>
         <textarea id="taOne" class="mathquill-editable" name="taOne" style="width:80%;vertical-align:top"></textarea>      
         <textarea id="taTwo" class="mathquill-editable" name="taTwo" style="width:80%;vertical-align:top"></textarea>
         <textarea id="taThree" class="mathquill-editable" name="taThree" style="width:80%;vertical-align:top"></textarea>
   </body>
</html>

In the above code I am trying to show the latex equation in the the textarea. And it is rendering as follows for each equation.

$('#taOne').mathquill('latex', 'x^2');
:-x2

$('#taTwo').mathquill('latex', '\int x');
:-intx

$('#taThree').mathquill('latex', '\left(x^2 + y^2 \right)');
:-left(x^2+y^2ight)

So, How to fix this Issue

Solution

Looks like you need to use double \\ instead of a single \.

Change this:

function clickMe()
{       
  $('#taOne').mathquill('latex', 'x^2');
  $('#taTwo').mathquill('latex', '\int x');
  $('#taThree').mathquill('latex', '\left(x^2 + y^2 \right)');
}

to:

function clickMe()
{       
  $('#taOne').mathquill('latex', 'x^2');
  $('#taTwo').mathquill('latex', '\\int x');
  $('#taThree').mathquill('latex', '\\left(x^2 + y^2 \\right)');
}

\ is used in Strings to escape special characters, so if you want a backslash in your string, you have to escape it via another backslash.