JSFiddle - React, Tailwind, and code Playground

by nosfan1019

HTML

<div id='main'>
    <div>
        <input type='text' class='one' />
        <input type='text' class='two' />
    </div>
</div>

<button>Submit</button>


<table></table>

CSS

#main {
    float: left;
    clear: both;
}

table {
    display: none;
}

td {
    width: 50px;
    height: 1em;
    background: #ccc;
    border: 1px solid #000;   
    border-top: 0px;    
}

tr:first-child td {
    border-top: 1px solid #000;
}

td:nth-child(2) {
    border-left: 0px;
}

JavaScript

$('button').click(function(){

    var one = $('.one').val(),
        two = $('.two').val();
    
    $('table').append('<tr><td>' + one + '</td><td>' + two + '</td></tr>').show();
    $(':input').val('');
    

});