JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">

<html>
    <head>
    	<title>Branch Administration</title>
        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script type="text/javascript">
       		<!--
				
        	-->
        </script>
    </head>
    <body>
		<div id="content">
		    <div id="branchViewEdit">
		        <div id="branchCoverageViewEdit" style="display: block;">
		            <h3>Branch Coverage</h3>
		            <table id="tblBranchCoverage">
		                <thead>
		                    <tr>
		                        <th>
		                            <input type="submit" id="btnDeleteCheckedCounties" value="Delete" title="Delete Selected Counties">
		                        </th>
		                        <th>County</th>
		                        <th>State</th>
		                        <th>Zip Codes</th>
		                    </tr>
		                </thead>
		                <tbody>
		                    <tr class="viewEditRow rowBorder">
		                        <td class="deleteCounty">
		                            <input type="checkbox" class="chkDeleteCounty" name="deleteCounties[]" value="103">
		                        </td>
		                        <td class="countyCovered">
		                            <label class="branchCountyCovered detailDisplay">Genesee</label>
		                            <input type="text" class="edit editBox editCounty" value="Genesee">
		                            <br>
		                            <input type="submit" class="edit submitCoverageEdits" value="Save Changes">
		                            <br>
		                            <input type="submit" class="edit cancelCoverageEdits" value="Cancel">
		                        </td>
		                        <td class="stateCovered">
		                            <label class="branchStateCovered detailDisplay">MI</label>
		                    ...

CSS

table {
				border-collapse: collapse;
				border-spacing: 0; }
			 
			body {
				font-family: Verdana, Arial, Helvetica, sans-serif;
				font-size: 70%;
				line-height: 1.5; }
			
			#branchViewEdit { text-align: center; }
			
			table td { text-align: left; }
			
			thead tr { border-bottom: 1px solid #CCC; }
			
			td { vertical-align: top; }
			
			#content {
				margin: 0 auto;
				width: 1000px; }
			
			th { text-align: center; }
			
			th { font-weight: bold; }
			
			#tblBranchCoverage,
			#tblViewEditAllBranches { width: 100%; }
			
			#tblBranchCoverage th,
			#tblBranchCoverage td,
			#tblViewEditAllBranches th,
			#tblViewEditAllBranches td { padding: 5px; }
			
			#tblBranchCoverage th,
			#tblViewEditAllBranches th { vertical-align: bottom; }
			
			#tblBranchCoverage td,
			#tblViewEditAllBranches td { padding-bottom: 10px; }
			
			.rowBorder { border-bottom: 1px solid #D8EDED; }
			
			textarea { 
				width: 98%;
				font-size: 120% !important; }
			
			.inputError {
				background-color: #FFC5C8; 
				border: 1px solid #F00; }
			
			.hover { background-color: #EFECFF; } /* Style added when hovering over coverage rows */

JavaScript

$(function(){
					// Hide edit elements on page load
					$('#tblBranchCoverage tr').each(function() {
						$(this).parent().parent().find('.edit').fadeOut(200);
						$(this).parent().parent().find('.detailDisplay').delay(200).fadeIn(200);
					});
					
					// Hide edit elements on page load
					$('#tblViewEditAllBranches tr').each(function() {
						$(this).parent().parent().find('.edit').fadeOut(200);
						$(this).parent().parent().find('.detailDisplay').delay(200).fadeIn(200);
					});
					
					// Toggle row color & show mouse pointer on #tblBranchCoverage row hover
					$('#tblBranchCoverage').on('mouseover', 'tr.viewEditRow', function() {
						$(this).css('cursor', 'pointer').addClass('hover');
					}).on('mouseout', 'tr.viewEditRow', function() {
						$(this).removeClass('hover');
					});
					
					// Toggle row color & show mouse pointer on #tblViewEditAllBranches row hover
					$('#tblViewEditAllBranches').on('mouseover', 'tr.viewEditRow', function() {
						$(this).css('cursor', 'pointer').addClass('hover');
					}).on('mouseout', 'tr.viewEditRow', function() {
						$(this).removeClass('hover');
					});
					
					// Prevent bubbling of click events in #tblBranchCoverage
					$('#tblBranchCoverage').on('click', ':input', function (e) {
						e.stopPropagation();
					});
					
					// Prevent bubbling of click events in #tblViewEditAllBranches
					$('#tblViewEditAllBranches').on('click', ':input', function (e) {
						e.stopPropagation();
					});
					
					// #tblBranchCoverage Change clicked row to Edit Mode
					$('#tblBranchCoverage').on('click', 'tr', function() {
						// Hide all other .edits in the table and show their corresponding labels
						$('#tblBranchCoverage tr').not(this).find('.edit').fadeOut(200);
						$('#tblBranchCoverage tr').not(this).find('label').delay(200).fadeIn(200);
						
						// Hide clicked row's labels and show its edit boxes
						$('label', this).fadeOut(200);
						$('.edit',...