JSFiddle - React, Tailwind, and code Playground

by john_s

HTML

<div class="sortable before">
	<div class="index row">
		<div class="label">Name</div>
		<div class="label">Field</div>
		<div class="label"><a class="add-row">Add Row</a></div>
	</div>
	<div class="sort-group group">
		<div class="row">
			<div class="field field-name">
				<input type="text" name="sort_row[1][name]" id="sort_row[1][name]" value="First Row Name" />
			</div>
			<div class="field field-field last">
				<input type="text" name="sort_row[1][field]" id="sort_row[1][field]" value="First Row Field" />
			</div>
		</div>
		<div class="row">
			<div class="field field-name">
				<input type="text" name="sort_row[2][name]" id="sort_row[2][name]" value="Second" />
			</div>
			<div class="field field-field last">
				<input type="text" name="sort_row[2][field]" id="sort_row[2][field]" value="Second" />
			</div>
		</div>
		<div class="row">
			<div class="field field-name">
				<input type="text" name="sort_row[3][name]" id="sort_row[3][name]" value="Third" />
			</div>
			<div class="field field-field last">
				<input type="text" name="sort_row[3][field]" id="sort_row[3][field]" value="Third" />
			</div>
		</div>
		<div class="row">
			<div class="field field-name">
				<input type="text" name="sort_row[4][name]" id="sort_row[4][name]" value="Fourth" />
			</div>
			<div class="field field-field last">
				<input type="text" name="sort_row[4][field]" id="sort_row[4][field]" value="Fourth" />
			</div>
		</div>
	</div>
</div>

CSS

.row {
		overflow: hidden;
	}

	.row .field,
	.row .label {
		width: 150px;
		float: left;
	}

JavaScript

$('.add-row').on('click', function (event) {
	function incrementProp(index, prop) {
		return prop.replace(/(\d+)/, function (fullMatch, n) {
			return Number(n) + 1;
		});
	}

	var clone_row,
		insert_location,
		clone_var = $(this).parents('.sortable');

	if (clone_var.is('.before')) {
		clone_row = clone_var.find('.sort-group .row:last');
		insert_location = clone_var.find('.sort-group .row:first');
		insert = 'insertBefore';
	} else {
		clone_row = clone_var.find('.sort-group .row:last');
		insert_location = clone_var.find('.sort-group .row:last');
		insert = 'insertAfter';
	}

	clone_row.clone(true)[insert](insert_location)
		.addClass('add').removeClass('first')
		.find('input[type=text], input[type=hidden], textarea, select').val('').attr('name', incrementProp).end()
		.find('input, textarea, select').attr('id', incrementProp);

	return false;
});