JSFiddle - React, Tailwind, and code Playground
HTML
<div class="row">
<div class="col-md-12">
<div class="portlet">
<div class="portlet-title"><i class="fa fa-pencil"></i> Content Title</div>
<div class="portlet-body" >
<div id="addTitles">
<div class="col-md-12">
<div class="lis_ting">
<ul>
<li>
<div class="custom-radio">
<label>
<input type="radio" value="Normal" name="a">
<span></span>
Special Instructions
</label>
</div>
</li>
<li>
<div class="custom-radio">
<label>
<input type="radio" value="Normal" name="a">
<span></span>
Upload Files
</label>
</div>
</li>
<li>
<div class="custom-radio">
<label>
<input type="radio" value="Normal" name="a">
<span></span>
Keyword Requirements
</label>
</div>
</li>
<li>
</li>
<li>
...
CSS
*{position:relative;}
.addtit-btn{
padding-top: 20px;
}
.app-div, .app2-div{
border:#7bccf7 1px solid;
padding: 30px 20px;
margin-bottom:20px;
display: block;
}
.closed-btn{
font-size: 16px;
display:block;
cursor: pointer;
width: 25px;
height: 25px;
}
.closed-btn a{
color: #364150;
}
#titlesAdds{
margin: 15px 0;
}
.lis_ting{
margin-bottom: 20px;
}
JavaScript
function addallTit() {
var container = $('#addTitles');
var inn = container.find('.app-div');
var $id = inn.length+1;
$id++;
$(container).append('<div id="app'+$id+'"><div class="col-md-12"><div class="app-div"><div class="closed-btn"><a href="javascript:">Close</a></div> <div class="input-group" > <span id="sizing-addon2" class="input-group-addon">Order # '+ $id +'</span><input type="text" placeholder="" class="form-control"> </div></div></div></div>');
$('.closed-btn ').click(function(e){
e.preventDefault();
$('#app'+$id).remove();
});
}
$('#titlesAdds').click(function() {
addallTit();
});