Help with tables

I’m trying to build two tables users can search and filter with but keep running issues with the second table.

Here is the full code, any help would be appreciated.

<style type="text/css"><!--
<!
.itstable2 thead td{
		background:-o-linear-gradient(bottom, #666666 5%, #0a0500 100%);	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #666666), color-stop(1, #0a0500) );
	background:-moz-linear-gradient( center top, #666666 5%, #0a0500 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#666666", endColorstr="#0a0500");	background: -o-linear-gradient(top,#666666,0a0500);

	background-color:#666666;
	border:0px solid #000000;
	text-align:center;
	border-width:0px 0px 1px 1px;
	
	color:#ffffff;
}

.itstable2 {<span id="CmCaReT"></span>
	margin:0px;margin-top:5px;padding:0px;
	width:100%;
	border:1px solid #000000;
	
	-moz-border-radius-bottomleft:0px;
	-webkit-border-bottom-left-radius:0px;
	border-bottom-left-radius:0px;
	
	-moz-border-radius-bottomright:0px;
	-webkit-border-bottom-right-radius:0px;
	border-bottom-right-radius:0px;
	
	-moz-border-radius-topright:0px;
	-webkit-border-top-right-radius:0px;
	border-top-right-radius:0px;
	
	-moz-border-radius-topleft:0px;
	-webkit-border-top-left-radius:0px;
	border-top-left-radius:0px;
}.itstable2 table{
    border-collapse: collapse;
        border-spacing: 0;
	width:100%;
	height:100%;
	margin:0px;padding:0px;
}.itstable2 tr:last-child td:last-child {
	-moz-border-radius-bottomright:0px;
	-webkit-border-bottom-right-radius:0px;
	border-bottom-right-radius:0px;
}
.itstable2 table tr:first-child td:first-child {
	-moz-border-radius-topleft:0px;
	-webkit-border-top-left-radius:0px;
	border-top-left-radius:0px;
}
.itstable2 table tr:first-child td:last-child {
	-moz-border-radius-topright:0px;
	-webkit-border-top-right-radius:0px;
	border-top-right-radius:0px;
}.itstable2 tr:last-child td:first-child{
	-moz-border-radius-bottomleft:0px;
	-webkit-border-bottom-left-radius:0px;
	border-bottom-left-radius:0px;
}
.itstable2 tr:nth-child(odd){ background-color:#efefef; }
.itstable2 tr:nth-child(even)    { background-color:#ffffff; }.itstable2 td{
	vertical-align:middle;
	border:1px solid #000000;
	border-width:0px 1px 1px 0px;
	text-align:left;<span id="CmCaReT"></span>
	padding:4px;
	color:#000000;
}.itstable2 tr:last-child td{
	border-width:0px 1px 0px 0px;
}.itstable2 tr td:last-child{
	border-width:0px 0px 1px 0px;
}.itstable2 tr:last-child td:last-child{
	border-width:0px 0px 0px 0px;
}
.itstable2 tr:first-child td{
	border:0px solid #000000;
	border-width:0px 0px 1px 1px;
}
.itstable2 tr:first-child td:first-child{
	border-width:0px 0px 1px 0px;
}
.itstable2 tr:first-child td:last-child{
	border-width:0px 0px 1px 1px;
}
--></style>
<h3 id="howto001" class="scroll-adjust" data-nav="Medium/High Impact Changes" data-nav-show="true">Medium / High Impact Changes</h3>
<p>Click here to view all, including key points and images.</p>
<div id="mylist_sorter"><input class="search" style="margin-right: 5px;" size="20" type="text" placeholder="Search" /> <button class="sort" data-sort="mylist_col01">Sort by Module</button> <button class="sort" data-sort="mylist_col04">Sort by Role</button> <button class="sort" data-sort="mylist_col05">Sort by Group</button>
<table class="itstable2" width="100%">
<thead>
<tr>
<td align="center" bgcolor="#d5d8dc"><strong>Epic Module</strong></td>
<td align="center" bgcolor="#d5d8dc"><strong>Summary of Changes</strong></td>
<td align="center" bgcolor="#d5d8dc"><strong>Related Knowledge Article(s)</strong></td>
<td align="center" bgcolor="#d5d8dc"><strong style="background-color: #d5d8dc;">Impacted Role(s)</strong></td>
<td align="center" bgcolor="#d5d8dc"><strong>Impacted Group(s)</strong></td>
<td align="center" bgcolor="#d5d8dc">
<p><strong>Activation Date</strong></p>
</td>
</tr>
</thead>
<tbody class="list">
<tr>
<td class="mylist_col01">Transfer Center</td>
<td class="mylist_col02">The Transfer Center department will use the Epic Transfer Center module to document all transfer requests for both Stanford Hospital and Valley Care.</td>
<td class="mylist_col03">
<p><a title="Transfer Center Overview (SHC/VC)" href="https://stanfordhc.service-now.com/edu/edu_view.do?sysparm_article=KB0366150" target="_blank">Transfer Center Overview (SHC/VC)</a><br />(New Article)</p>
</td>
<td class="mylist_col04">Nurse, Unit Clerk</td>
<td class="mylist_col05">ED, HOD, Inpatient, Peri-Op,&nbsp; Rad</td>
<td class="mylist_col06">June 3</td>
</tr>
<tr>
<td class="mylist_col01">Haiku</td>
<td class="mylist_col02">A new process has been implemented for when an outside facility requests patient transfer to Stanford or ValleyCare ED.</td>
<td class="mylist_col03"><a title="Document Expected Patient Arrival to the Emergency Department (SHC/VC)" href="https://stanfordhc.service-now.com/edu/edu_view.do?sysparm_article=KB0058994" target="_blank">Document Expected Patient Arrival to the Emergency Department (SHC/VC)</a><br /> (Refer to Step One for Change)<br /><br /> <a title="Document an Expected Note on Expected ED Encounter (SHC/VC)" href="https://stanfordhc.service-now.com/edu/edu_view.do?sysparm_article=KB0373352" target="_blank">Document an Expected Note on Expected ED Encounter (SHC/VC)</a><br /> (Refer to Step&nbsp;Three for Change)</td>
<td class="mylist_col04">Nurse</td>
<td class="mylist_col05">ED</td>
<td class="mylist_col06">June 10</td>
</tr>
</tbody>
</table>
</div>
<div class="backtotop" align="right"><a href="#top">Back to Top</a></div>
<p>&nbsp;</p>
<h3 id="howto002" class="scroll-adjust" data-nav="Low Impact Changes" data-nav-show="true">Low Impact Changes</h3>
<p>Click here to view all, including key points and images.</p>
<div id="mylist_sorter"><input class="search" style="margin-right: 5px;" size="20" type="text" placeholder="Search" /> <button class="sort" data-sort="mylist_col01">Sort by Module</button> <button class="sort" data-sort="mylist_col03">Sort by Date</button> <button class="sort" data-sort="mylist_col04">Sort by Group</button> <button class="sort" data-sort="mylist_col05">Sort by Role</button>
<table class="itstable2" width="100%">
<thead>
<tr>
<td align="center" bgcolor="#d5d8dc"><strong>Epic Module</strong></td>
<td align="center" bgcolor="#d5d8dc"><strong>Summary of Changes</strong></td>
<td align="center" bgcolor="#d5d8dc"><strong>Activation Date</strong></td>
<td align="center" bgcolor="#d5d8dc"><strong>Impacted Group(s)</strong></td>
<td align="center" bgcolor="#d5d8dc"><strong>Impacted Role(s)</strong></td>
</tr>
</thead>
<tbody class="list">
<tr>
<td class="mylist_co101">King's Stool</td>
<td class="mylist_co102">King's Stool now has a new chart to document stool consistency. The Consistency selections allow for a broader range of row choices in the flowchart.</td>
<td class="mylist_co103">June 15</td>
<td class="mylist_co104">ED, Inpatient, OR Procedure, Peri-Op</td>
<td class="mylist_co105">Nurse</td>
</tr>
<tr>
<td class="mylist_co101">Physical Therapist Flowsheet and Navigator</td>
<td class="mylist_co102">A new Vestibular Exam is now available in the Physical Therapist Flowsheet and Navigator. This standardized documentation process will allow for easy documentation and comparison of trends.</td>
<td class="mylist_co103">June 12</td>
<td class="mylist_co104">HOD</td>
<td class="mylist_co105">Therapists PT OT SLP ST</td>
</tr>
</tbody>
</table>
</div>
<div class="backtotop" align="right"><a href="#top">Back to Top</a></div>
<p>&nbsp;</p>

What are the issues? What are you trying to accomplish vs what is happening instead?

I’d like for users to search within the table or click on a button to filter.

The first table works but the second doesn’t work. Can’t filter or search.

I can’t search or filter anything with the first table either. There is no JavaScript code which provides that functionality.