How to make Mathjax re-render the entire page by clicking

I modified Leaflyer’s template(知识点模板 v3.0——Leaflyer - AnkiWeb) to make it available on the latest version (2.1.44) of Anki and compatible with the Latex format. This template allows multiple fill-in-the-blank questions to exist on a card and click on them individually. It achieves this function by modifying the basic template, replacing the string with blanks during the loading process, and replacing it with text after clicking. But MathJax only renders once after initialization, which causes the code to fail to load as a formula. I think I can re-render the formula after clicking it, but the attempt was unsuccessful.

How should I modify my code so that it can be re-rendered after clicking or rendered first before performing other operations?

I use {| c1:: |} to make spaces instead of {{c1::}}.
My English is not good. I’m very sorry.

Front

{{=<% %>=}}


<!-- <img src="_space.png" style="filter:alpha(opacity=30);opacity:0.3;width:100%;position:fixed;right:0px;bottom:0px; "> -->

<div class="h1 colorx x-left">
	<img src="_L.png" width="22" height="22" align="left"/>
		{{^Tags}}问题{{/Tags}}
		{{#Tags}}{{Tags}}{{/Tags}}
	<span id="time"></span>
</div>

	<div class="h2 x-left" id='div0' style="display:block;"><%问题%></div>
	<div class="h2 x-left" id='div1' style="display:none;"><%问题%></div>

<input class="btn" type="button" onclick="showAndHidden();" value=""style="height:75px;width:70px;background: url(_switch.png);border:none;background-size:100%;" />

<script type="text/javascript">

    [].forEach.call(document.querySelectorAll('.h1'),
       function(V0) {
          V0.innerHTML = V0.innerHTML.replace(/\marked/g,"★");
 });

function showLocale(objD)
    {   
        var hh = objD.getHours();
            if(hh<10) hh = '0' + hh;
        var mm = objD.getMinutes();
            if(mm<10) mm = '0' + mm;
                str = hh + ":" + mm;   
            return(str);   
    }   
function tick()   
    {   
        var today;   
        today = new Date();
        document.getElementById("time").innerHTML = showLocale(today);
        window.setTimeout("tick()", 1000);
    }   
    tick();

var arr = new Array,arr1 = new Array,arr2 = new Array;

/////////
    [].forEach.call(document.querySelectorAll('#div1'),
       function(V2) {
          V2.innerHTML = V2.innerHTML.replace(/(\{\|[c]\d+\:\:[^]+?)\:\:*?\|\}/g,"$1|}").replace(/\{\|[c]\d+\:\:([^]+?)\|\}/g,'<span class="cloze">'+"$1"+'</span>');
 });
 //////////


/////////
    [].forEach.call(document.querySelectorAll('#div0'),
      function(V0) {
         V0.innerHTML = V0.innerHTML.replace(/\{\|[c]\d+\:\:([^]+?)\|\}/g,
               function(cloze) {
                   var div30='<span id="div3" onclick="toggle(this)" class="cloze" cloze="@CLOZE@" cloze1="@CLOZE@1" cloze2="@CLOZE@2" wor="wor2">@......@</span>';
var dd1=cloze.indexOf("::"),dd2=cloze.lastIndexOf("::"),dd3=cloze.length,cc=0,cc1=0,cc2=0;
                   var word = cloze.substring(dd1+2, dd3-2);
                   var word1,word2;
                   switch(dd2-dd1){
                     case 0: word1=word;word2="<uu>  </uu>";  break;
                     case 1: word1=word;word2="<uu>  </uu>";  break;
                     case 2: word1=word;word2="<uu>  </uu>";  break;
                     default:
                        if(dd3-dd2==4){word1=word;word2="<uu>&emsp;&emsp;</uu>";}
                           else{word1=cloze.substring(dd1+2, dd2);word2="<uu>&nbsp;&nbsp;"+cloze.substring(dd2+2, dd3-2)+"&nbsp;&nbsp;</uu>";}}
                  cc=arr.push(word)-1; cc1=arr1.push(word1)-1;cc2=arr2.push(word2)-1;
                  return div30.replace( '@CLOZE@',cc).replace( '@CLOZE@1',cc1).replace( '@CLOZE@2',cc2).replace( '@......@', word2);
  }); });
/////////



//////////
     function toggle(id) {

       if (id.getAttribute('wor')=="wor2") {
    	 
                   id.innerHTML = arr1[id.getAttribute('cloze1')]; 
                   id.setAttribute('wor',"wor1");

                  return;}
        if (id.getAttribute('wor')=="wor1"){

           id.innerHTML = arr2[id.getAttribute('cloze2')]; 
           id.setAttribute('wor',"wor2");
          return;}
}
/////////


//////////
     function showAndHidden(){
        var div0=document.getElementById("div0");
        var div1=document.getElementById("div1");
        if(div0.style.display=='block') {div0.style.display='none';}
             else {div0.style.display='block';}
        if(div1.style.display=='none') {div1.style.display='block';}
             else {div1.style.display='none';}
      }
/////////


</script>

<div style="display:none">{{cloze:问题}}</div>

Back

{{=<% %>=}}
<!-- <img src="_space.png" style="filter:alpha(opacity=30);opacity:0.15;width:100%;position:fixed;right:0px;bottom:0px; "> -->

<div class="h1 colorx x-left">
	<img src="_L.png" width="22" height="22" align="left"/>
		{{^Tags}}问题{{/Tags}}
		{{#Tags}}{{Tags}}{{/Tags}}
	<span id="time"></span>
</div>

	<div class="h2 x-left" id='div0' style="display:none;"><%问题%></div>
	<div class="h2 x-left" id='div1' style="display:block;"><%问题%></div>

{{#答案}}
	<div class="h2 x-left slide" id='div0' style="display:block;"><%答案%></div>
	<div class="h2 x-left slide" id='div1' style="display:none;"><%答案%></div>
{{/答案}}

{{#笔记}}
<br><div class="slide">
	<div class="h1 colory y-left">
	<img src="_N.png" width="22" height="22" align="left"/>
		笔记
	</div>
	<div class="h2  y-left">{{笔记}}</div></div>
{{/笔记}}

{{#相关知识}}
<br><div class="slide">
	<div class="h1 colorz z-left">
	<img src="_K.png" width="22" height="22" align="left"/>
	相关知识
	</div>
	<div class="h2 z-left">{{相关知识}}</div></div>
{{/相关知识}}


<input class="btn" type="button" onclick="showAndHidden();" value=""style="height:70px;width:70px;background: url(_switch.png);border:none;background-size:100%;" />


<!--以下点击显示填空题空格的js代码部分修改自飞沙分享的模板 -->


<script type="text/javascript">

    [].forEach.call(document.querySelectorAll('.h1'),
       function(V0) {
          V0.innerHTML = V0.innerHTML.replace(/\marked/g,"☂");
 });

function showLocale(objD)
    {   
        var hh = objD.getHours();
            if(hh<10) hh = '0' + hh;
        var mm = objD.getMinutes();
            if(mm<10) mm = '0' + mm;
                str = hh + ":" + mm;   
            return(str);   
    }   
function tick()   
    {   
        var today;   
        today = new Date();
        document.getElementById("time").innerHTML = showLocale(today);
        window.setTimeout("tick()", 1000);
    }   
    tick();

var arr = new Array,arr1 = new Array,arr2 = new Array;

/////////
    [].forEach.call(document.querySelectorAll('#div0'),
      function(V0) {
         V0.innerHTML = V0.innerHTML.replace(/\{\|[c]\d+\:\:([^]+?)\|\}/g,
               function(cloze) {
                   var div30='<span id="div3" onclick="toggle(this)" class="cloze" cloze="@CLOZE@" cloze1="@CLOZE@1" cloze2="@CLOZE@2" wor="wor2">@......@</span>';
var dd1=cloze.indexOf("::"),dd2=cloze.lastIndexOf("::"),dd3=cloze.length,cc=0,cc1=0,cc2=0;
                   var word = cloze.substring(dd1+2, dd3-2);
                   var word1,word2;
                   switch(dd2-dd1){
                     case 0: word1=word;word2="<uu>  </uu>";  break;
                     case 1: word1=word;word2="<uu>  </uu>";  break;
                     case 2: word1=word;word2="<uu>  </uu>";  break;
                     default:
                        if(dd3-dd2==4){word1=word;word2="<uu>&emsp;&emsp;</uu>";}
                           else{word1=cloze.substring(dd1+2, dd2);word2="<uu>&nbsp;&nbsp;"+cloze.substring(dd2+2, dd3-2)+"&nbsp;&nbsp;</uu>";}}
                  cc=arr.push(word)-1; cc1=arr1.push(word1)-1;cc2=arr2.push(word2)-1;
                  return div30.replace( '@CLOZE@',cc).replace( '@CLOZE@1',cc1).replace( '@CLOZE@2',cc2).replace( '@......@', word2);
  }); });
/////////

/////////
    [].forEach.call(document.querySelectorAll('#div1'),
       function(V2) {
          V2.innerHTML = V2.innerHTML.replace(/(\{\|[c]\d+\:\:[^]+?)\:\:*?\|\}/g,"$1|}").replace(/\{\|[c]\d+\:\:([^]+?)\|\}/g,'<span class="cloze">'+"$1"+'</span>');
 });
 //////////

//////////
     function toggle(id) {

       if (id.getAttribute('wor')=="wor2") {
    	 
                   id.innerHTML = arr1[id.getAttribute('cloze1')]; 
                   id.setAttribute('wor',"wor1");

                  return;}
        if (id.getAttribute('wor')=="wor1"){

           id.innerHTML = arr2[id.getAttribute('cloze2')]; 
           id.setAttribute('wor',"wor2");

          return;}}
/////////


//////////
     function showAndHidden(){
        var div0=document.getElementById("div0");
        var div1=document.getElementById("div1");
        if(div0.style.display=='block') {div0.style.display='none';}
             else {div0.style.display='block';}
        if(div1.style.display=='none') {div1.style.display='block';}
             else {div1.style.display='none';}
        if(div2.style.display=='none') {div2.style.display='block';}
             else {div2.style.display='none';}
      }
/////////

</script>

<div style="display:none">{{cloze:问题}}</div>

<!-- http://leaflyer.lofter.com -->

Styling

/* ----------调用字体---------- */

@font-face { font-family: kt; src: url('_kt.ttf'); }
@font-face { font-family: times; src: url('_times.ttf'); }

/* ----------各种样式---------- */
.card { font: 20px/30px kt;text-align: left;}
.cloze {#	font-weight: bold; -webkit-animation: cloze 0.4s 0s; -webkit-animation-fill-mode: forwards; color: #ec6c4f; border-bottom: 1px solid #ec6c4f;}
.slide { position:relative; -webkit-animation:slide 1s 0s; -webkit-animation-fill-mode:forwards; }
.x-left { border-left: 3px solid #ec6c4f; }
.y-left { border-left: 3px solid #338eca; }
.z-left { border-left: 3px solid #4c991b; }
.colorx { color:#ec6c4f; }
.colory { color:#338eca; }
.colorz { color:#4c991b; }
uu { border-bottom: 1px solid #ec6c4f; }
.h1 { font: 22px/22px kt; padding: 0.3em 0em 0.3em 0.5em; }
.h2 { font: 20px/30px kt; padding: 0.3em 0em 0.3em 0.5em; }
.btn { opacity:1; position:fixed; right:10px; bottom:10px; }
	.btn:hover { opacity:0.6; }
	.btn:active { opacity:0.8; }
img { max-width: 100%; #	max-height: 100px; vertical-align: middle; }
	.chrome img { max-width: 100%; #	max-height: 100px; vertical-align: middle; }
li { margin-left:-0.5em; }
i { font-family: times; padding: 0 3px 0 0; }
u { text-decoration:none; background-color: #ffff75; border-bottom: 2px solid #ec6c4f; }
hr { height: 1px; width: 100%; display: block; border: 0px solid #fff; vertical-align: middle; background-color: #ccc; }
#time { font-family: tims; float: right; }

@-webkit-keyframes slide
{
	0%		{ opacity: 0;     top: 100px; }
	50%		{ opacity: 0.8;  top: -10px; }
	100%	{ opacity: 1;     top: -3px; }
}

@-webkit-keyframes cloze {
	from	{ opacity: 0; }
	to		{ opacity: 1; }	
}


/* http://leaflyer.lofter.com */

<!-- http://leaflyer.lofter.com -->