Mathjax not rendering jquery equation

I have the code linked here ->https://jsfiddle.net/jw7g21p4/4/ but it's not working as I hoped.

I have two scripts for MathJAX linked in the html header, one comes from the MathJAX website (currently commented out) and is supposed to provide the latest version. The other I found on someone else's post and is an older version of MathJax. The script from MathJAX doesn't render when the input values update, but it looks nicer before changing values. The second script does re-renders when input values update but the render doesn't look as nice.

Try both of the scripts below to test - pay attention to the sqrt symbol.

Any suggestions for getting the MathJAX script library to re-render on input value change like the second script does?

  $(document).ready(function (e) {
    $('#d_i').on('input', function () {
      calculate();
    });

    $('#phi_v_w').on('input', function () {
      calculate();
    });

    $('#e').on('input', function () {
      calculate();
    });

    function calculate() {
      var n1 = parseFloat($('#d_i').val());
      var n2 = parseFloat($('#phi_v_w').val());
      var n3 = parseFloat($('#e').val());
      var a4 = "";
          a4 = ((2*n1*n2) /Math.sqrt(1 + Math.pow((6 * n3) / n1,2))).toFixed(2) ;
      
      $('#V_a').html(
        "$$\\begin{aligned}" + 
        "V_a &= { {2 \\cdot d_i \\cdot \\phi v_w} \\over { \\sqrt{ 1 + \\Large \\left[ {6 \\cdot e} \\over { d_i } \\right]^2 }}} " +
        "\\" +
        ("\\ &= { {2 \\cdot d_i \\cdot \\phi v_w} \\over { \\sqrt{ 1 + \\Large \\left[ {6 \\cdot XE} \\over { d_i } \\right]^2 }}}").replaceAll("d_i",n1).replaceAll("\\phi v_w",n2).replaceAll("XE",n3) +
        "\\" +
        "\\ V_a &= "+ a4 +" \\ kN" +
        "\\end{aligned}$$"
      )

     
      MathJax.Hub.Queue(["Typeset",MathJax.Hub,'V_a']);

    };

    calculate();
  });

<html>

<head>
  <title>JS + MathJax TeX Test Page</title>
  
  <!-- <script type="text/javascript" id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"> </script> -->
  <script src='https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.2/MathJax.js?config=TeX-MML-AM_CHTML'></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

</head>

<body>

  <main>
        <section class="main">
      <p>


                <table class="parameter">
                    <tr>
                        <th>Parameter Name</th>
                        <th>Symbol</th>
                        <th>Value</th>
                        <th>Units</th>
                    </tr>
                    <tr>
                        <td>Plate height</td>
                        <td>\( d_i \)</td>
                        <td class="input"><input type='text' id="d_i" /></td>
                        <td>\( mm \)</td>
                    </tr>
                    <tr>
                        <td>Design capacity of weld per unit length</td>
                        <td>\( \phi v_w \)</td>
                        <td class="input"><input type='text' id="phi_v_w" /></td>
                        <td>\( kN/mm \)</td>
                    </tr>

                    <tr>
                        <td>Load Eccentricity</td>
                        <td>\( e \)</td>
                        <td class="input"><input type='text' id="e" /></td>
                        <td>\( mm \)</td>
                    </tr>

                </table>
    </section>
    <br>

      <section class="math">
        <div class="math" id="V_a">         </div>

      </section>

  </main>
</body>

</html>

Solution

I realised that I need to replace the line: "MathJax.Hub.Queue(["Typeset",MathJax.Hub,'V_a']);" with "MathJax.typeset()" in my jQuery for version 3.x.x+ MathJAX.