JSFiddle - React, Tailwind, and code Playground
HTML
<div id="primary">
<div class="quote-container">
<label>Quote </label>
<textarea rows=5></textarea>
<label>Author</label>
<input type="text" name="author" />
<a href="#remove" class="remove-container">Remove</a>
</div>
<a href="#add" class="add-container">Add</a>
</div>
JavaScript
$(".add-container").on("click", function(e){
e.preventDefault();
$(".quote-container").eq(0).clone(true).insertBefore(".add-container");
var qContainer = $(".quote-container").length;
for (i=0; i<qContainer; i++) {
if ($(".quote-container").eq(i).find("label").html() === "Quote "+(i+1)) {
} else {
$(".quote-container").eq(i).find("label").eq(0).replaceWith("<label>Quote "+(i+1)+"</label>");
}
}
});
$('#primary').on('click', 'a.remove-container', function(e) {
e.preventDefault();
$(this).parent().remove();
});