JSFiddle - React, Tailwind, and code Playground

by deepakb

HTML

<table id="servicesTable" style="align:center;" width="100%" cellpadding="5" border="0">
	<thead>
		<tr>
			<th>Services</th>
			<th>Monitor</th>
			<th>Add/Remove</th>
		</tr>
	</thead>
	<tbody>
					<tr class="newService" align="center">
			<td><select id="newServiceName" name="serviceList">
<option value="1">Secure Shell</option>
<option value="2">Web Server</option>
<option value="3">Directory Services</option>
<option value="4">System Health</option>
<option value="5">Remote Desktop Protocol</option>
</select></td><td><input value="monitored" id="newMonitor" checked="checked" type="checkbox" name="monitored"></td><td><input class="add-remove-new" name="yt1" type="button" value="Add"></td>			</tr>
		</tbody>
		<tfoot>
			<tr>
				<th>Services</th>
				<th>Monitor</th>
				<th>Add/Remove</th>
			</tr>
		</tfoot>
	</table>

JavaScript

$('body').on('click', '.add-remove-new:last', function() {
		$('tr.newService:first').clone().insertAfter($('tr.newService:last'));
	});