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

button:hover
{
    opacity: 1;
    filter: alpha(opacity=100); /* For IE8 and earlier */
    color:red;
}

JavaScript

var animationDuration = 500,
    oldOpacity = 1,
    selectedRow = '';

$("button").click(function () {
    selectedRow = $(this).parent().parent();
    $("#jobs").find("tr").not(selectedRow).stop().fadeTo(animationDuration, .3);
    $(selectedRow).stop().fadeTo(animationDuration, 1);
});

$('tr').hover( function() {
    $(this).stop().fadeTo(animationDuration, 1);
}, function() {
    if ( selectedRow != '' && $(this).attr('id') == selectedRow.attr('id') ) {
        $(this).stop().fadeTo(animationDuration, 1);
    } else {
        $(this).stop().fadeTo(animationDuration, .3);
    }
});