JSFiddle - React, Tailwind, and code Playground

HTML

<table width="100%">

    <tr class="coverageRow" >
        <td class="countyCovered" width="115px">
            <label class="branchCountyCovered coverageDisplay">Forsyth</label>
            <input type="text" class="edit editBox editCounty" style="display: none; width: 111px;"
            value="Forsyth">
           <input id="tblBranchCoverage"  type="button" value="click">
           
        
        </td>
        
    </tr>
</table>

JavaScript

$('#tblBranchCoverage').on('click' function () {
    // With the following block uncommented the row that is clicked on gets all of its elements hidden - they should toggle (labels shown, ".edit" elements hidden and vice versa)
    /*$(this).parent().find('tr td').each(function () {
        $(this).find('.edit').hide();
        $(this).find('.coverageDisplay [style*="display: none"]').show();
    });*/
    $(this).find('.coverageDisplay').fadeOut(200);
    $(this).find('.edit').delay(200).fadeIn(200);
});