JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_HTMLorMML"></script>
<body>
    <div id="math">
        <p>$x^2$</p>
        <p>$x_2$</p>
    </div>
</body>

JavaScript

//mathjax configuration
    MathJax.Hub.Config({
      asciimath2jax: {
        delimiters: [['$','$']],
        ignoreClass:"no-mathjax",
      },
      messageStyle: "none",
      showMathMenu: false,
    });

//this is the function that has to be called when the user click on a mathjax element.
function jax_remove(jax){
    alert("REMOVED :"+jax.inputID);
    jax.Remove();
}

//with this I am trying to add the ".click" handler to every mathjax element
setTimeout(function() { //timeout is necessary for mathjax loading
    jaxes = MathJax.Hub.getAllJax("math");
    for(var i = 0; i < jaxes.length; i++) {
        var jax=jaxes[i];
         $("#"+jax.inputID+"-Frame").click( jax_remove.bind(null, jax) );
    };
},1250);