JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
$$\class{x}{2}+\class{y}{2}=\class{z}{5}$$

New equation:<br/>
<button id="num">
 1/2+1/2=2/1
</button>

<br/>
Failed attempts are rendering the new equation:<br/>
<button id="typ">
typeset
</button>

<br/>

<button id="rep">
rerender
</button>

<br/>

<button id="rer">
reprocess
</button>

JavaScript

$('#num').click(function() {
	$( '.x' ).html( '\frac{1}{2}' );
	$( '.y' ).html( '\frac{1}{2}' );
	$( '.z' ).html( '\frac{2}{1}' );
});

$('#rer').click(function() {
	MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
});

$('#rer').click(function() {
	MathJax.Hub.Queue(["Rerender", MathJax.Hub]);
});

$('#rep').click(function() {
	MathJax.Hub.Queue(["Reprocess", MathJax.Hub]);
});