JSFiddle - React, Tailwind, and code Playground

by John Grivas

HTML

<font size="5">
<p align="center">
<p1>Insert Given:</p1>
<div align="center"; id="Input1">
    <form id='user-input'>
        <input type='text' id='given' placeholder='Given Information'></input>
    </form>
<p2>Insert Statement<br>to Prove:</p2>
<br>
<div align="center"; id="Input2">
    <form id='user-input'>
        <input type='text' id='prove' placeholder='Statement to Prove'></input>
    </form>

    <input type="button" value="Submit!">

<br>

    <table id="myTable" style="width:100%">

  <tr>
    <th>Step Number</th>
    <th>Step</th>       
    <th>Explaination</th>
  </tr>
  <tr>
    <td>1</td>
    <td id='Test'></td>     
    <td>Given</td>
</table>

CSS

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
th, td {
    padding: 5px;
}

JavaScript

$('input[type=button]').click( function() {
    var table = document.getElementById("myTable");

    var row = table.insertRow(2);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);    
    var cell3 = row.insertCell(2);
    
    cell1.innerHTML = document.getElementById("given").value;
    cell2.innerHTML = document.getElementById("prove").value;
    cell3.innerHTML = cell1.innerHTML + cell2.innerHTML
});