JSFiddle - React, Tailwind, and code Playground

HTML

<table border="1" style="width:100%">
    <tr>
        <td>Jill</td>
        <td>
            <input type="checkbox" id='bike'>
        </td>
    </tr>
    <tr>
        <td>Eve</td>
        <td>
            <input type="checkbox" id="car">
        </td>
    </tr>
    <tr>
        <td>Bill</td>
        <td>
            <input type="checkbox" id="airplean">
        </td>
    </tr>
</table>
<button type="button" id="add">Select Some</button>

CSS

table, td {
    text-align : center
}
input[type='checkbox'] {
    float:left;
    margin-left:50%
}
td>span
{
    float:left;
}

JavaScript

$('#add').click(function () {
    $('#bike').attr('checked', 'checked').after("<span>Good Selection</span>");
    $('#airplean').attr('checked', 'checked').after("<span>Woow</span>");

});