JSFiddle - React, Tailwind, and code Playground

HTML

<html>

<head>
  <title>JS + MathJax TeX Test Page</title>
  
  <!--<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>-->
  <!-- <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>

JavaScript

$(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();
  });