JSFiddle - React, Tailwind, and code Playground

HTML

<table id="dgKeyWhatever">
    <tr>
        <td align="center" style="font-size:Large;">D</td>
        <td align="left" style="font-size:Large;width:150px;">&nbsp;Sharp, John</td>
        <td>
            <input name="dgKey$ctl02$TotalOT" type="text" value="219.0" size="6" readonly="readonly" id="dgKey_TotalOT_0" style="font-size:18pt;text-align:right" />
        </td>
        <td>
            <input name="dgKey$ctl02$PendingOT" type="text" value="12.0" size="6" id="dgKey_PendingOT_0" style="font-size:18pt;text-align:right" />
        </td>
        <td>
            <input name="dgKey$ctl02$ScheduledOT" type="text" value="183.0" size="6" id="dgKey_ScheduledOT_0" style="font-size:18pt;text-align:right" />
        </td>
        <td>
            <input name="dgKey$ctl02$TurnedDownOT" type="text" value="24.0" size="6" id="dgKey_TurnedDownOT_0" style="font-size:18pt;text-align:right" />
        </td>
        <td>
            <input name="dgKey$ctl02$FudgeFactor" type="text" value="0.0" size="6" id="dgKey_FudgeFactor_0" style="font-size:18pt;text-align:right" />
        </td>
        <td>
            <input name="dgKey$ctl02$HomeNum" type="text" value="623-561-8099" size="12" id="dgKey_HomeNum_0" style="font-size:18pt;text-align:center" />
        </td>
        <td>
            <input name="dgKey$ctl02$CellNum" type="text" value="602-619-2933" size="12" id="dgKey_CellNum_0" style="font-size:18pt;text-align:center" />
        </td>
        <td align="left" style="font-size:Large;">&nbsp;JLSHARP</td>
        <td align="left" style="font-size:Large;">&nbsp;SUPERVISOR</td>
    </tr>
</table>

CSS

tr:hover input[id^="dgKey"] {
    background-color: transparent;
}
.foo{
    background-color: #EAD575;
}

JavaScript

$('tr').has('input[id^="dgKey"]').hover(function(){
	$(this).toggleClass('foo');
});