JSFiddle - React, Tailwind, and code Playground
by bartula
HTML
<div class="optionBox">
<div class="block">
<input type="text" /> <span class="remove">Remove Option</span>
</div>
<div class="block">
<input type="text" /> <span class="remove">Remove Option</span>
</div>
<div class="block">
<span class="add">Add Option</span>
</div>
</div>
CSS
.block {
display: block;
}
input {
width: 50%;
display: inline-block;
}
span {
display: inline-block;
cursor: pointer;
text-decoration: underline;
}
JavaScript
$('.add').click(function() {
$('.block:last').before('<div class="block"><input type="text" /><span class="remove">Remove Option</span></div>');
});
$('.optionBox').on('click','.remove',function() {
$(this).parent().remove();
});