JSFiddle - React, Tailwind, and code Playground

HTML

<div id="jobs">
    <table>
        <tbody>
            <tr id="test1">
                <td>TEST1</td>
                <td><button data-job="test1">&gt;</button></td>
            </tr>
            <tr id="test2">
                <td>TEST2</td>
                <td><button data-job="test2">&gt;</button></td>
            </tr>
        </tbody>
    </table>
</div>

CSS

tr { opacity:0.2 }
tr:hover{ opacity:1 }

JavaScript

$("button").click(function () {
            var animationDuration = 500;
            var job = $(this).data("job");
            var selectedRow = document.getElementById(job);
            $("#jobs").find("tr").not(selectedRow).fadeTo(animationDuration, .3);
            $(selectedRow).fadeTo(animationDuration, 1);
            });