JSFiddle - React, Tailwind, and code Playground

HTML

//main html page where content is being loaded
<div id ="contentholder">
    <button id="button1" value="submit" />
<div>



    
//seperate html page (nametable.html)
<table id="usernametable">
    <tr>
        some stuff here
    </tr>
</table>
    <button id="button2" />
    
    
//another seperate html file (questions.html)
<table>
   another table here
</table>
<button id="button3" />    
    
    
//one last html file (passwordchange.html)
<table>
    who would have guessed, another table!
</table>
  <button id="button4" />

JavaScript

$(document).ready(function () {
            $("#button1").click(loadUserNameTable);
            $("#button2").click(loadQuestions);
            $("#button3").click(loadPasswordChange);
            $("button4").click(submit);
        });

        function loadUserNameTable() {
            $("#contentholder").load("nametable.html");
        }
        function loadQuestions() {
            $("#contentholder").load("questions.html");
        }
        function loadPasswordChanger() {
                        $("#contentholder").load("passwordchange.html");
        }