JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
<title>Relabelling issue</title>

<script type="text/x-mathjax-config">
MathJax.Hub.Config({
  jax: ["input/TeX","output/HTML-CSS"],
  extensions: ["tex2jax.js"],
  TeX: {
    extensions: ["AMSmath.js","AMSsymbols.js"],
    equationNumbers: {
        autoNumber: "AMS"
    }
  },
});
</script>

<!-- Load MathJax -->
<script type="text/javascript"
        src="http://cdn.mathjax.org/mathjax/latest/MathJax.js">
</script>

<script type="text/javascript">
var previewArea;
var updateButton;

var firstUpdate = true;
function update()
{
    previewArea.innerHTML = '\\begin{equation}\n' +
                            '\\label{eq1}\n' +
                            '\\sum_{i = 1}^n i = \\frac{n(n + 1)}{2}\n' +
                            '\\end{equation}\n' +
                            '\\begin{equation}\n' +
                            '\\label{eq2}\n' +
                            '\\sum_{i = 1}^n i = \\frac{n(n + 1)}{2}\n' +
                            '\\end{equation}\n';

    
    MathJax.Hub.Queue(
        ['resetEquationNumbers', MathJax.InputJax.TeX],
        ['Typeset', MathJax.Hub, previewArea]
    );
}

window.onload = function() {
   previewArea = document.getElementById('preview'); 
   updateButton = document.getElementById('update'); 
   updateButton.onclick = update;
}
</script>
</head>
<body>
<div id="preview">
</div>
<p>
<input id="update" type="button" value="Update">
</p>
</body>
</html>