JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <thead>
        <tr>
            <th><input type='text' /></th>
            <th><input type='text' /></th>
            <th><input type='text' /></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>red</td>
            <td>circle</td>
            <td>1</td>
        </tr>
        <tr>
            <td>orange</td>
            <td>square</td>
            <td>2</td>
        </tr>
        <tr>
            <td>yellow</td>
            <td>triangle</td>
            <td>3</td>
        </tr>
    </tbody>
</table>

CSS

.selected{
    background-color: #ccc
}

JavaScript

$('table').on('click', 'tr', function () {
                if ($(this).hasClass('selected')) {
                    $(this).removeClass('selected');
                }
                else {
                    $('tr.selected').removeClass('selected');
                    $(this).addClass('selected');
                    //alert('selected');
                    //alert( $(this).text() );
                }
    
    for(var i=0; i<$(this).find("td").length; i++)
    {
        $(this).closest("table").find("th").eq(i).find("input:text").val($(this).find("td").eq(i).text())
    }
});