JSFiddle - React, Tailwind, and code Playground
HTML
<div id="form-wrap" style="width:500px; margin: 0 auto;">
<table>
<tr>
<th width="55%">Service Name</th>
<th width="35%">From Price</th>
<th width="10%"></th>
</tr>
<tbody id='template-list'>
<tr id="template">
<td id="example" width="55%">
<select name="service-name" id="service-name" style="width:230px;">
<option value="" selected>--select--</option>
<option value="service-1">service-1</option>
<option value="service-2">service-2</option>
<option value="service-3">service-3</option>
<option value="service-4">service-4</option>
</select>
</td>
<td width="45%"><input type="text" name="from-price" id="from-price" /></td>
<td width="10%"><input type="button" id="remove" value="remove row" /></td>
</tr>
</tbody>
</table>
<input type="button" value="+ Add Row" id="add-row" />
</div>
JavaScript
jQuery(document).ready(function() {
id = 0;
var template = jQuery('#template');
jQuery('#add-row').click(function() {
var row = jQuery(template).clone();
template.find('input:text').val("");
row.attr('id','row_'+(++id));
row.find('#remove').show();
row.find("select")[0].selectedIndex = 0;
jQuery('#template-list').append(row);
});
jQuery('#form-wrap').on('click','#remove',function() {
jQuery(this).closest('tr').remove();
});
jQuery('#form-wrap').on('change', 'select',function(event) {
var services = {};
var valid = true;
$('#form-wrap select').each(function(index, element) {
if (services[element.selectedIndex])
valid = false;
if (element.selectedIndex != 0)
services[element.selectedIndex] = true;
});
if (!valid)
{
alert('Sorry, that service has already been selected');
this.selectedIndex = 0;
}
});
});