JSFiddle - React, Tailwind, and code Playground

HTML

<table cellpadding="3" cellspacing="0" >
<tr>
<td class="cellformatting"><label>first name*</label></td>
<td class="cellformatting"><input id="fname" type="text" class="required searchfields" />
</td>
</tr>
<tr>
 <td class="cellformatting"><label>last name*</label></td>
<td class="cellformatting"><input id="lname" type="text" class="searchfields" /></td>
</tr>
</table>

CSS

tr.border td
{
    border-top:solid 1px red;
    border-bottom:solid 1px red;
}
tr.border td:first-child
{
    border-left:solid 1px red;
}
tr.border td:last-child
{
    border-right:solid 1px red;
}

JavaScript

$(function(){
    
    checkBorder();
    
    $("table tr input").change(function(){
       checkBorder(); 
    });
  
});
function checkBorder(){
 $("table tr").each(function(){
    if ($(this).find("input").val() == ""){
       $(this).attr("class", "border");
    } else
    {
      $(this).attr("class", "");   
    }
});   
}