jQuery function to add and remove table row. Works with a form attached.

jquery add & remove table rows

<table class="table table-striped table-bordered" id="form_fields_data">
<thead>
	<tr>
		<th>Key</th>
		<th>Value</th>
		<th>&nbsp;</th>
	</tr>
</thead>
<tbody>
	<tr>
		<td> KEY </td>
		<td>VALUE</td>
		<td>
			<div class="pull-right">
				<a data-action="remove_this_row" class="btn btn-danger btn-xs disabled" title="Delete Row"><i class="fa fa-times fa-fw"></i> </a>
			</div>
		</td>
	</tr>
	
	<tr class="add_row_action">
		<td colspan="3">
			<div class="pull-right">
				<a data-action="add_new_row" data-field-id="{{ $field->id }}" class="btn btn-primary btn-xs" title="Add Row"><i class="fa fa-plus fa-fw"></i> </a>
			</div>
		</td>
	</tr>
</tbody>
</table>	
<script type="text/javascript">
$(document).ready(function() {
	$('a[data-action="remove_this_row"]').on('click', function(event) {
		event.preventDefault();
		$(this).closest('tr').remove();
	});
 
	$('a[data-action="add_new_row"]').on('click', function(event) {
		event.preventDefault();
		var source = $(this).closest('tr').prev('tr');
		var clone = source.clone(true);
		source.after( clone );
		clone.find('a.disabled').removeClass('disabled');
	});
});
</script>