JSFiddle - React, Tailwind, and code Playground

by sutherland

HTML

<div class="question">
<input type="text" placeholder="Question">
<ul>
    <li><input type="text" placeholder="Option"><button class="remove">Remove</button></li>
    <li><button class="add-option">Add Option</button></li>
</ul>
</div>

<button class="add-question">Add Question</button>

CSS

* {
    margin: 7px;
}

JavaScript

$('body').on('click', 'button.add-option', function() {
    $(this).parent().prev().clone().insertBefore('li:last-child');
});


$('body').on('click', 'button.remove', function() {
    $(this).parent().remove();
});

$('body').on('click', 'button.add-question', function() {
    $('.question').first().clone().insertBefore(this);
});