js templating

templating

//JS

var template = function(templateHTML, data) {
	var index = '';
	for(var x in data) {
		index = x;
		if(x.substring(0,1)=='_') {
			index = x.substring(1);
		}

		templateHTML = templateHTML.replace(new RegExp('{{'+index.toUpperCase()+'}}', 'g'), data[x]);
	}

	return templateHTML;
};

//generating template
$('#salary-container').append(template(
	$('#salary-tpl').html(),
	{ index: $('#salary-container .salary-row').length }
));


<script type="text/html" id="salary-tpl">
	<div class="salary-row">
		<div class="col-md-4">
			<input type="text" class="contact form-control" name="client_staff[{{INDEX}}][title]" placeholder="Title">
		</div>
		<div class="col-md-6">
			<input type="text" class="contact form-control typeahead-staff" name="client_staff[{{INDEX}}][user]" placeholder="User">
		</div>
		<div class="col-md-2 text-right">
			<input type="text" class="contact form-control salary" name="client_staff[{{INDEX}}][salary]" placeholder="Salary">
		</div>
	</div>
</script>