I am implementing a UI which is supposed to look pretty much like the one on math.stackexchange.com:
There are several problems with your current setup. First, the example you have borrowed from is an example of updating a single equation, not paragraphs that includes multiple equations. For that, you would need to consider the second dynamic example (from the MathJax examples page). You should be getting an error message in your browser console that will have to do with a null
value (math
will be null
unless you start out with some math in the editor to begin with).
But there is a second issue, which is that the wmd editor will be updating the wmd-preview area, and you should coordinate with it to do the MathJax updating, as otherwise it might change the content of the div while MathJax is working on it. Wmd is also smarter about when it does updates than just on every keypress (e.g., arrow keys don't cause updates), so it will be more efficient to coordinate as well. The SE version of wmd has hooks to allow you to do that, and I suspect the one you are using does as well.
Finally, you are going to have to do more work to protect the mathematics from the Markdown engine so that things like underscores and backslashes don't get processed by Markdown when they appear in mathematics. That is a bit tricky, but without that, you will run into lots of problems with your TeX code not getting processed properly.
To deal with the last two issues, you might consider looking at the code used by MSE for hooking MathJax into wmd. Perhaps that will give you some clues about how to do it.