MathJax Message Converter

I am wanting to use MathJax to convert code like x^2=\frac{x}{3} into nice-looking math equations. I can use HTML to do this (as shown below, i.e. see the script portion near the bottom of the HTML part). However, I am wanting to be able to do this using a message feature and have the transfer take place after I type it and click the "Send" button. How can I edit this code to do this?

var messages = document.getElementById("messages");
var textbox = document.getElementById("textbox");
var button = document.getElementById("button");
function latex(){
     var TypedMath;
     var newMessage = document.createElement("li");
     TypedMath="To the right is the textbox value that is attached to this message, I want it to be nice looking math equations. I think the MathJax script goes here."+textbox.value;
     newMessage.innerHTML = TypedMath;
     messages.appendChild(newMessage);
     textbox.value = "";
}
button.addEventListener("click", latex);

<html>
<ul id="messages"></ul>
<input id="textbox" type="text">
<button id="button">Send</button>
<script src="script.js"></script>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
    <script id="MathJax-script" async
            src="https://cdn.jsdelivr.net/npm/mathjax@3.0.1/es5/tex-mml-chtml.js">
    </script>
  </head>
  <body>
  <p>
    I like to be able to type math, e.g. \(x^2=\frac{x}{3}\).
  </p>
  </body>
  </html>

Solution

The example below does what I think you want.

var input = document.getElementById('textbox');
var output = document.getElementById('preview');
var button = document.getElementById('button');
output.innerHTML = input.value.trim();
const typesetInput = function() {
  button.disabled = true;
  output.innerHTML = input.value.trim();
  //MathJax.texReset();
  //MathJax.typesetClear();
  MathJax.typesetPromise([output]).catch(function(err) {
    output.innerHTML = '';
    output.appendChild(document.createTextNode(err.message));
    console.error(err);
  }).then(function() {
    button.disabled = false;
    input.value = "";
  });
}

<html>
<ul id="messages"></ul>
<input id="textbox" type="text" value="\(x^2=\frac{x}{3}\)">
<button id="button" onclick="typesetInput()">Send</button>
<script src="script.js"></script>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
  <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3.0.1/es5/tex-mml-chtml.js">
  </script>
</head>

<body>
  <p id="preview">
    I like to be able to type math, e.g. \(x^2=\frac{x}{3}\).
  </p>
</body>

</html>