JSFiddle - React, Tailwind, and code Playground

HTML

<table>
			<tr>
				<td>
					Contact Type:
				</td>
				<td>
					<select name="contactSelect" id="contactSelect"> <!-- Function showHide Show work on table elements -->
						<option name="default" value="default" selected>Pelease select ...</option> <!-- Hide all 4 rows below -->
						<option name="Send Inquiry" value="Inquiry" id="cat2" text="General Inquiry">General Inquiry</option> <!-- Shows Option 1 Row -->
						<option name="Send Feedback" value="Feedback" id="cat3" text="Send Feedback">Send Feedback</option> <!-- Shows Option 2 Row -->
						<option name="File Complain" value="Complain" text="File Complain">File Complain</option> <!-- Shows Option 3 Row -->
						<option name="New Request" value="Request" text="New Request">New Request</option> <!-- Shows Option 4 Row -->
					</select>
				</td>
			</tr>
			<tr> <!-- Header from contactSelect-->
				<th colspan="2" id="myHeader" name="myHeader" value="text" style="display:none">text</th>
			</tr>
			<tr class='row General Inquiry' style="display:none">
				<td>Inquiry</td>
				<td><textarea rows="4"></textarea></td>
			</tr>
			<!-- Feedback

			All General Inguqires goes here

			-->
			<tr class='row Feedback' style="display:none">
				<td>Feedback</td>
				<td><textarea rows="4"></textarea></td>
			</tr>
			<!-- Complains

			All General Inguqires goes here

			-->
			<tr class='row Complain' style="display:none">
				<td>Complain</td>
				<td><textarea rows="4"></textarea></td>
			</tr>
			<!-- New Implementation Requests

			All General Inguqires goes here

			-->
			<tr class='row New Request' style="display:none">
				<td>Storage</td>
				<td><input type="checkbox" name="storage" value="storage"></td>
			</tr>
			<tr class='row New Request' style="display:none">
				<td>Network Infrastructure</td>
				<td><input type="checkbox" id="network" name="network" value="network"></td>
			</tr>
            <tr class='subrow network' style="display:none">
            	<td><input type="checkbox"...

JavaScript

function changeVal() {
				$('#myHeader').html(this.name);
				$(this).closest('tr').nextAll('.row').hide();
				$(this).closest('tr').nextAll('.subrow').hide();
				$('.'+this.value).show();
				var tempText = "";
				switch(this.value)
				{
					case "Inquiry":
						tempText="Send Inquiry";
						break;
					case "Feedback":
						tempText="Send Feedback";
						break;
					case "Complain":
						tempText="File Complain";
						break;
					case "Request":
						tempText="New Request";
						break;
				}
				$('#myHeader').html(tempText).toggle(this.value != 'default');
			}

			$(function(){
				$('#contactSelect').change(changeVal);
				$('#network, #security').change(function(){
        	$('.'+this.value).toggle();
        });
			});