JSFiddle - React, Tailwind, and code Playground

by paska

HTML

<table id="tbl1">
    <tr>
        <td><input type="radio" name="grp" /></td>
    </tr>
    <tr>
        <td><input type="radio" name="grp" /></td>
    </tr>
    <tr>
        <td><input type="radio" name="grp" /></td>
    </tr>
    <tr>
        <td><input type="radio" name="grp" /></td>
    </tr>
</table>
<br /><br />
<table id="tbl2">
    <tr>
        <td><input type="radio" name="grp2" /></td>
    </tr>
    <tr>
        <td><input type="radio" name="grp2" /></td>
    </tr>
    <tr>
        <td><input type="radio" name="grp2" /></td>
    </tr>
    <tr>
        <td><input type="radio" name="grp2" /></td>
    </tr>
</table>

CSS

tr.selected td {
    background-color: red;
}

JavaScript

$(":radio[name='grp']").on("change", function() {
    $("#tbl1").find("tr.selected, tr:has(:radio:checked)").toggleClass("selected");
});

$(":radio[name='grp2']").on("change", function() {
    $("#tbl2 tr.selected, #tbl2 tr:has(:radio:checked)").toggleClass("selected");
});