JSFiddle - React, Tailwind, and code Playground

HTML

<body>
	<!--DIRECTIONS-->
	<h1><span id="highlight">How Does This Work?</span></h1>
	<p>Type in all the information for your system of three equations.<br />
	When finished hit "Go".</p>

	<!--Form-->
	<p class="matrix">
		<FORM NAME="myform" ACTION="" METHOD="GET">
		<input type="text" name="x1"> x + <input type="text" name="y1"> y + <input type="text" name="z1"> z = <input type="text" name="a1"><br />
		<input type="text" name="x2"> x + <input type="text" name="y2"> y + <input type="text" name="z2"> z = <input type="text" name="a2"><br />
		<input type="text" name="x3"> x + <input type="text" name="y3"> y + <input type="text" name="z3"> z = <input type="text" name="a3"><br />
		<input id="submit" type="button" class="button" name="button" value="GO">
		</form>
	</p>

	    <div id="answer">
        <h1><span id="highlight">The Answer:</span></h2>
        <div id='real-answer'></div>        
    </div>

</body>

CSS

body{
	font-family: Garamond;
	color: #3f3f3f;
	font-size: 16px;
	margin: 5%;
    width: auto;
    text-align: center;
    font

}
h1{
	font-family: Helvetica, Arial, Verdana;
	color: #7e7e7e;
}

#highlight {
    background: #d3d3d3;
    padding: 3px 5px;
    margin: -3px -5px;
    line-height: 1.7;
    border-radius: 3px;
    display:inline-block;
}

input{
	width: 20px;
}

/*button css*/
.button {
	background-color:#a1a1a1;
	border-radius:28px;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:arial;
	font-size:14px;
	font-weight:bold;
	padding:3px 24px;
	
}
.button:hover {
	background-color:#505050;
}
.button:active {
	position:relative;
	top:1px;
}

/*----------------------------------------------*/

.matrix{
	line-height:300%;
	letter-spacing:2px
}

b{
	color:orange;
	font-family: Helvetica, Arial, Verdana;
}

JavaScript

$(document).ready(function() {
//tells the browser to use JS after html code has loaded
	
	$("p, .answer").hide();//hides all the paragraph tags


	$("h1").click(function() { //execute as soon as anyone clicks on an h1 tag
		$(this).next().slideToggle(300);//toggle visibility of the tag that comes after h1
	});

	$(".button").click(function() {
		$(".matrix").slideUp(300, function(){
			$(".answer").slideDown(300);
		});

	});   
    
     $('#submit').click(function(){
         var form = $('form')[0];
		function system (x1, x2, x3, y1, y2, y3, z1, z2, z3, a1, a2, a3){
	       this.x1 = x1;
	       this.x2 = x2;
	       this.x3 = x3;
	       this.y1 = y1;
	       this.y2 = y2;
	       this.y3 = y3;
	       this.z1 = z1;
	       this.z2 = z2;
	       this.z3 = z3;
	       this.a1 = a1;
	       this.a2 = a2;
	       this.a3 = a3;
	       this.calcDanswer = function() {
	           return (this.x1*((this.y2*this.z3)-(this.z2*this.y3))) - (this.y1*((this.x2*this.z3)-(this.z2*this.x3))) + (this.z1*((this.x2*D.y3)- (this.y2*this.x3)));
	       };
	       this.calcXanswer = function(){
	           return (this.a1*((this.y2*this.z3)-(this.z2*this.y3))) - (this.y1*((this.a2*this.z3)-(this.z2*this.a3))) + (this.z1*((this.a2*this.y3)-(this.y2*this.a3)));
	       };
	       this.calcYanswer = function(){
	           return (this.x1*((this.a2*this.z3)-(this.z2*this.a3))) - (this.a1*((this.x2*this.z3)-(this.z2*this.x3))) + (this.z1*((this.x2*this.a3)-(this.a2*this.x3)));
	       };
	       this.calcZanswer = function(){
	           return (this.x1*((this.y2*this.a3)-(this.a2*this.y3))) - (this.y1*((this.x2*this.a3)-(this.a2*this.x3))) + (this.a1*((this.x2*this.y3)-(this.y2*this.x3)));
	       };
	    }
	   
	    var x1 = form.x1.value;
   		var x2 = form.x2.value;
	    var x3 = form.x3.value;
	    var y1 = form.y1.value;
	    var y2 = form.y2.value;
	    var y3 = form.y3.value;
	    var z1 = form.z1.value;
	    var z2 = form.z2.value;
	    var z3 = form.z3.value;
	    var a1...