JSFiddle - React, Tailwind, and code Playground

by JJ Li

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<a href="#" id="addbutton"> Add New Class </a>
				
					<table id="classtable" class="table table-striped">
						<thead>
							<tr>
							
								<th>Class Internal Name</th>
								<th>Display Name</th>
								<th>Enabled</th>
								<th>Search Weight</th>
								
								<th>Delete class</th>
							</tr>
						</thead>
						<tbody id="sortable">
							
								<tr>
									
									<td><input type="text" id="internalname" name="internalname" placeholder="Class Internal Name" value='Agreement Supplier'></td>
									<td><input type="text" id="displayname" name="displayname" placeholder="Display Name" value='Agreement Supplier'></td>
									<td><input type="checkbox" name="enabled" value='1'></td>
									<td><input type="text" id="weight1" name="weight1" value='1'></td>
								
									<td><button type="button" class="removebutton" title="Remove this class"><span class="glyphicon glyphicon-remove "></span></button> </td>
								</tr>
							
								<tr>
									
									<td><input type="text" id="internalname" name="internalname" placeholder="Class Internal Name" value='California Supplier'></td>
									<td><input type="text" id="displayname" name="displayname" placeholder="Display Name" value='California Supplier'></td>
									<td><input type="checkbox" name="enabled" value='1'></td>
									<td><input type="text" id="weight1" name="weight1" value='1'></td>
									
									<td><button type="button" class="removebutton" title="Remove this class"><span class="glyphicon glyphicon-remove "></span></button> </td>
								</tr>
							
								<tr>
									
									<td><input type="text" id="internalname" name="internalname" placeholder="Class Internal...

JavaScript

$(document).ready(function() {

		$("#sortable").sortable();

	$("#addbutton").click(function () {
		    $("#classtable").each(function () {
			     	 var i=0;
		         var tds = '<tr class="ui-sortable-handle" >';

		         tds += '<td><input type="text" id="internalname" name="internalname" placeholder="Class Internal Name"></td>'+
					'<td><input type="text" id="displayname" name="displayname" placeholder="Display Name"></td>'+
					'<td><input type="checkbox" name="enabled"></td>'+
					'<td><input type="text" id="weight1" name="weight1"></td>'+
					'<td><button type="button" class="removebutton" title="Remove this class"><span class="glyphicon glyphicon-remove "></span></button> </td>';

		         
		        tds += '</tr>';
		         if ($('tbody', this).length > 0) {
		             $('tbody', this).append(tds);
		         } else {
		             $(this).append(tds);
		         }
		     });
		});



	$("#classtable").on("click",".removebutton",function () {
		    
		     if (confirm("Do you want to delete?")){
		    	  $(this).closest('tr').remove();
		       }
		     return false;
		 }); 

	
	});