MathJax Rendering not working on hiden items

Hi,
I am making a website about math learning, I use MathJax to show tex code, but it is rendering only when I check “This element is visible on page load”
unfortunately I really need a lot of item to be hidden on page load!

I found a partial solution, using a iFrame, the problem is that I don’t want to use html (instead of text) every time I want to write an equation! that’s really hard to maintain text behavior and formatting

is there an alternative to mathjax that don’t have this issue?
is there a way we can “refresh” only one part of the page? the “text” that I wan’t to show next!
I hope you can help me I really need this!

Did you find a solution? running into the same exact problem\

Found a solution:
Here’s what’s happening: MathJax renders all the math equations on page load when you have this script as part of your page.. However, any future math equations that come onto the page later on wont be rendered by the previous script mentioned. You will need to run a separate javascript code to render any additional math equations that werent part of the initial page load.

MathJax.typeset()

Put that javascript code in a workflow and voila, your math equation will now render even if it wasnt part of the initial page load