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 selectedRow;
$("button").click(function () {
    var animationDuration = 500;
    var job = $(this).data("job");
    selectedRow = $(this).parents('tr').attr('id');
    var rows = $("#jobs").find("tr[id!='" + selectedRow + "']");    
    for(var i = 0; i < rows.length; i++) {
        $(rows[i]).find('td:first').fadeTo(animationDuration, .3);
        $(rows[i]).find('button').fadeTo(animationDuration, .3);
        $('tr#' + selectedRow).find('td').fadeTo(animationDuration, 1);
    }
});
$('button').mouseenter(function(){
    $(this).fadeTo(500,1);
});
$('button').mouseleave(function(){
    if($(this).parents('tr').attr('id') != selectedRow){
        $(this).fadeTo(500,0.3);
    }
});