JSFiddle - React, Tailwind, and code Playground
by Alex Thomas
HTML
<div class="category">
<span class="category-title">Ocupation</span>
<a href="#" class="addItem">Add Item</a>
<br>
<p><input type="text" class="item" placeholder="item"></input></p>
</div>
<div class="category">
<span class="category-title">Ocupation</span>
<a href="#" class="addItem">Add Item</a>
<br>
<p><input type="text" class="item" placeholder="item"></input></p>
</div>
<div class="category">
<span class="category-title">Ocupation</span>
<a href="#" class="addItem">Add Item</a>
<br>
<p><input type="text" class="item" placeholder="item"></input></p>
</div>
<div class="category">
<span class="category-title">Ocupation</span>
<a href="#" class="addItem">Add Item</a>
<br>
<p><input type="text" class="item" placeholder="item"></input></p>
</div>
<div class="category">
<span class="category-title">Ocupation</span>
<a href="#" class="addItem">Add Item</a>
<br>
<p><input type="text" class="item" placeholder="item"></input></p>
</div>
CSS
.addItem{
color: #adadad;
}
.removeItem{
color: #adadad;
}
JavaScript
$(".addItem").on("click",function(){
var newInput = $('<p><input type="text" class="item" placeholder="item"></input><a href="#" class="removeItem">remove</a></p>');
$(this).closest(".category").append(newInput);
});
$(".removeItem").on("click",function(){
$(this).css("background-color","red");
$(this).closest("p").remove();
});