Mathquil Eats ( and )

Trying to debug a mathquill issue.

HTML

<link rel="stylesheet" href="http://mathquill.com/mathquill.css">
<script src="http://mathquill.com/mathquill.min.js"></script>
<textarea id="rawtex">Quadratic formula:
[x=\frac{-(b)\pm\sqrt{(b)^2-4(a)(c)}}{2(a)}]
And some more text.
</textarea>
<div id="html-report"></div>
a:<input id="a" type="text" value="-1"/>&nbsp;&nbsp;
b:<input id="b" type="text" value="4"/>&nbsp;
c:<input id="c" type="text" value="2"/>
<button onclick="add();">Add</button>

CSS

span.step-number {
    border-right: 1px solid silver;
    color: silver;
    display: inline-block;
    float: left;
    font-size: 36px;
    margin-right: 20px;
    padding-right: 10px;
}
body { padding: 30px; }
div.info {
   border-top: 1px dashed blue;
   margin: 15px 0;
   padding-top: 15px;    
}
textarea { width: 100%; height: 72px; }
input { width: 40px; }

JavaScript

function add() {
    var a = $('#a').val(),
        b = $('#b').val(),
        c = $('#c').val(),
        s = $('div.info').length + 1,
        tex = $('#rawtex').val();
    tex = tex.split('[').join('<span class="tex">').split(']').join('</span>').split("\n").join('<br/>').split('(a)').join('(' + a + ')').split('(b)').join('(' + b + ')').split('(c)').join('(' + c + ')');
    var d = '<div class="info' + '" id="step-' + s + '"><span class="step-number">' + s + '</span><div class="step-content">' + tex + '</div></div>';
    console.log(s);
    console.log(tex);
    console.log(d);
    $('#html-report').append(d);
    $('.tex').each(function() {
        $(this).removeClass('tex').mathquill();
    });
}