JSFiddle - React, Tailwind, and code Playground

HTML

<table cellspacing="0" style="width: 100%;" id="actionsTable">
				<thead class="bg-glass-hover">
					<tr>
						<th onclick="clicked(this)" id="demeritNumber">Demerit</th>
						<th onclick="clicked(this)" id="description">Description</th>
						<th onclick="clicked(this)" id="actionDescription">Actions</th>
						<th onclick="clicked(this)" id="responsible">Responsible</th>
						<th onclick="clicked(this)" id="scheduledDate">Scheduled Date</th>
						<th onclick="clicked(this)" id="closedDate">Closed Date</th>
						<th onclick="clicked(this)" id="done">Done</th>
						<th onclick="clicked(this)" id="approbation">App.</th>
						<th onclick="clicked(this)" id="comments">Comments</th>
					</tr>
				</thead>
				<tbody>
												<tr>
						<td style="font-size: 7.5pt; width: 60px; min-width: 60px;"><a href="/qc/demerit/view?id=DR-HZ-BL-05112014-03">
										DR-HZ-BL-05112014-03									</a> <input type="hidden" value="DR-HZ-BL-05112014-03" name="ids[]">
						</td>
						<td style="font-size: 8pt; width: 100px; min-width: 100px;">
																			test										<hr style="margin: 0 auto; border-top-style: dashed; border-top-color: black;">
																		</td>
						<td><textarea class="expand" name="actions[]" style="height: 15px; overflow: hidden; padding-top: 0px; padding-bottom: 0px;">à é û</textarea>
						</td>
							
<!-- 				//********************************************							 -->
<!-- 				// PRINT COMBOBOX FOR RESPONSIBLE SO THAT USER CAN'T TYPE IN A WRONG NAME.							 -->
<!-- 				//******************************************** -->
					<td style="width:180px; min-width: 180px;"><select id="responsibles[]" name="responsibles[]" style="width:180px; height:16px;">
					<option>-</option><option value="Name2">Name2</option><option value="Name3">Name3</option><option value="Name4">Name4</option><option value="Name1">Name1</option><option value="Name5">Name5</option><option value="Name6">Name6</option></select></td>					
					<script>...