JSFiddle - React, Tailwind, and code Playground
HTML
<div style="float:left; width:33%;" class="wrapper"><hr/>
<input type="button" class="add" style="width:180px;" value="Add Air Hammer" />
<div class="clonedInput">Air Hammer
<label class="input input-right-small">
<input type="button" class="delete" value="X" disabled="disabled" />
<select id="AirHammer2" name="AirHammer2" style="width:160px;">
<option value="none" selected="selected" style="color:gray">None</option>
<option value="none">1</option>
</select>
</label>
</div>
</div>
<div style="float:left; width:33%;" class="wrapper"><hr/>
<input type="button" class="add" style="width:180px;" value="Add Boiler" />
<div class="clonedInput">Boiler
<label class="input input-right-small">
<input type="button" class="delete" value="X" disabled="disabled"/>
<select id="Boiler3" name="Boiler3" style="width:160px;">
<option value="none" selected="selected" style="color:gray">None</option>
</select>
</label>
</div>
</div>
JavaScript
$(document).ready(function() {
var inputs = 1;
$('.add').click(function() {
var $wrapper = $(this).closest('.wrapper');
$wrapper.find('.delete').removeAttr('disabled');
$wrapper.find('.clonedInput:first')
.clone(true)
.appendTo($wrapper)
;
});
$('.delete').click(function() {
if (confirm('continue delete?')) {
--inputs;
var $wrapper = $(this).closest('.wrapper');
$wrapper.find('.delete:first').attr('disabled', $wrapper.find('.delete').length < 2);
$(this).closest('.clonedInput').remove();
}
});
});