JSFiddle - React, Tailwind, and code Playground
HTML
<a href="#" id="Add">Add More</a>
<div class="row">
<div class="content">
<div class="pull-left">Employer</div>
<div class="pull-left">
<input type="text" class="tripObject" name="employer" value="" />
<strong>Position</strong>
<input type="text" class="tripObject" name="position" value="" />
</div>
<div class="pull-left"><a class="remove-link" href="#" onclick='removeDOM(this)'>Remove</a></div>
</div>
</div>
CSS
.row
{
width: 900px;
}
}
.pull-left
{
float: left;
}
.remove-link
{
display:none;
}
JavaScript
$(document).ready(function(){
$("#Add").click(function(){
$('.remove-link').show();
var obj = $("div.content").eq(0).clone(); //this will clone the html elements
$("div.row").append(obj); //this will append to the existing elements
});
});
function removeDOM(thisObj){
if($('.content').size() == 2){
$($('.remove-link').not(thisObj)[0]).hide();
}
if($('.content').size() != 1)
$(thisObj).parent().parent().remove();
}