MathJax with Dynamic CSS

<html>
<head>
<title>MathJax with Dynamic CSS</title>
<script
  src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML">
</script>
<style>
#Step1, #Step2, #Step3, #Step4, #Step5 {visibility: hidden}
</style>
</head>
<body>

<p>
Expand the following:
\begin{align}
  (x+1)^2
    &\cssId{Step1}{= (x+1)(x+1)}\\
    &\cssId{Step2}{= x(x+1) + 1(x+1)}\\
    &\cssId{Step3}{= (x^2+x) + (x+1)}\\
    &\cssId{Step4}{= x^2 + (x + x) + 1}\\
    &\cssId{Step5}{= x^2+2x+1}\\
\end{align}
</p>

<input type="button" onclick="DynamicMJ.ShowStep()"
       value="Show Next Step" id="step" disabled="true" />
<input type="button" onclick="DynamicMJ.ResetSteps()"
       value="Reset" id="reset" disabled="true" />

<script>
var DynamicMJ = {
  n: 1,
  ShowStep: function () {
    document.getElementById("Step"+this.n).style.visibility = "visible";
    this.n++;
    if (!document.getElementById("Step"+this.n)) {
      document.getElementById("step").disabled = true
    }
    document.getElementById("reset").disabled = false;
  },
  ResetSteps: function () {
    document.getElementById("step").disabled = false;
    document.getElementById("reset").disabled = true;
    var i = 1, step; this.n = 1;
    while (step = document.getElementById("Step"+i)) {
      step.style.visibility = "hidden"; i++;
    }
  }
};
MathJax.Hub.Queue(function () {
  document.getElementById("step").disabled = false;
});
</script>

</body>
</html>