Dynamic table with CSS Serial numbers

by Soumya Rao

HTML

<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-2.1.1.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
	<div class="panel panel-primary"> <!-- Development and Action Plan Review -->
		<div class="panel-heading">
			<h4>Table</h4>
		</div>
<div class="bs-example">
			<div class="Container">
        <table  class="table table-hover small-text" id="tb2">
					<tr class="tr-header">
						<th>S.No</th>
						<th>Name</th>
						<th>Age</th>
						<th>Class</th>
						<th>Year</th>
						<th><a href="javascript:void(0);" style="font-size:18px;width:33%;" id="addMore2" title="Add More Person"><span class="glyphicon glyphicon-plus"></span></a></th>
					</tr>
					<tr id="1A">
						<td>&nbsp;</td>
						<td><input type="text" name="Summary[]" class="form-control"></td>
						<td><input type="text" name="Action[]" class="form-control"></td>
						<td><input type="text" name="Variance[]" class="form-control"></td>
						<td><input type="text" name="PerformanceGap[]" class="form-control"></td>
						<td><a href='javascript:void(0);' class='remove'><span class='glyphicon glyphicon-remove'></span></a></td>
					</tr>
				</table>
        </div>
       </div>
       </div>

CSS

#tb2 {
		counter-reset: serial-number;  /* Set the serial number counter to 0 */
		}
		#tb2 td:first-child:before {
		counter-increment: serial-number;  /* Increment the serial number counter */
		content: counter(serial-number);  /* Display the counter */
		}

JavaScript

$(function(){
		$('#addMore2').on('click', function() {
				var data = $("#tb2 tr:eq(1)").clone(true).appendTo("#tb2");
				data.find("input").val('');
		});
		$(document).on('click', '.remove', function() {
			var trIndex = $(this).closest("tr").index();
				if(trIndex>1) {
				$(this).closest("tr").remove();
			} else {
				
			}
		});
	});