JSFiddle - React, Tailwind, and code Playground

by Rich Costello

HTML

<table id="myTable">
    <tr class="table-header">
        <td class="table-cell">Game</td>
        <td class="table-cell">Yes </td>
        <td class="table-cell">No</td>
    </tr>
    <tr class="table-row">
        <td class="table-cell">
        FootBall
        </td>
        <td class="table-cell">
        <input type="radio" name="yes">
        </td>
        <td class="table-cell">
        <input type="radio" name="yes">
        </td>
    </tr>
    <tr class="table-row">
        <td class="table-cell">
        Hockey
        </td>
        <td class="table-cell">
        <input type="radio" name="yes">
        </td>
        <td class="table-cell">
        <input type="radio" name="yes">
        </td>
    </tr>
    <tr class="table-row">
        <td class="table-cell">
        Other
        </td>
        <td class="table-cell-text">
        <input type="text" name="yes" id="txt">
        </td>
        
    </tr>
</table>

CSS

.table-header{
    background-color:green;
}
.table-cell{
    
    width:100px;
    height:20px;
}

JavaScript

var inp = $("#txt");
// where #txt is the id of the textbox

$(".table-cell-text").keyup(function (event) {
    if (event.keyCode == 13) {
        if (inp.val().length > 0) {
          $('#myTable tr:last').before('<tr class="table-row"><td class="table-cell">' + inp.val() + '</td>' +
            '<td class="table-cell">' +
            '<input type="radio" name="yes" />' +
            '</td>' +
            '<td class="table-cell">' +
            '<input type="radio" name="yes" />' +
            '</td></tr>');
        }
    }
                                            
});