Strange behavior when truncating while using MathJax

I have MathJax implemented for a website and what I am trying to implement is shortening the text area to a certain length and have it be clickable and then load more on click. MathJax loads the truncated text just fine, but when I click the text to expand it to the entire paragraph, MathJax appends the initial shortened math to the end of the newly rendered entire paragraph. Does anyone have any experience with this? I'm assuming it is occurring because the truncated text is still on the queue and so it still prints it after the entire text is loaded, but I cant seem to figure out how to clear the queue shortened text from the queue to get it to work properly. Any help/suggestions would be greatly appreciated!

Here is the basics of my code:

var showOnClick = function() {
        ctrl.showAll(!ctrl.showAll());
};

MathJax.Hub.Queue(['Typeset', MathJax.Hub]);
return m('p.readable.pointer', {onclick: showOnClick},
          ctrl.showAll() ? result.description : description_truncated);

Solution

I think that the main reason is that you already have all those spans that contain the formula parts and when you add the text, the engine tries to take all the contents of your text field as a source and reformat it. Since the spans don't look like the math source, it discards them (it is just a guess, but looks like it works this way).

My solution: instead of appending some text directly, add a new span and only regenerate the formula in this span. Be careful: if the text you are adding is cut like this it won't work: ["my super formula: $x \subset ", "\mathbb{R}$."].

So, here's my simplified example (note that I refresh the span with the id "txt2"):

<head>
<script type="text/x-mathjax-config">
  MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});

  function addText() {
    document.getElementById('txt').innerHTML += '<span id=txt2> ...adding new formula: $x\\subseteq X$</span>';
    MathJax.Hub.Queue(["Typeset",MathJax.Hub,"txt2"]);
  }
</script>
<script type="text/javascript" async
  src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_CHTML">
</script>
</head>
<body>
  <div id=txt>$1\neq 0$</div>
  <input type=button onclick="addText()" value="Do it"/>
</body>