JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-md-12">
<div class="panel panel-default mt-30">
<!-- start: add user -->
<table class="table table-hover" id="tblAddUser">
<tr class="tr_clone active mt-5">
<td style="vertical-align: top; text-align: left; padding-left: 25px;" class="col-md-1"><!-- user image --> <img src="assets/images/bg_2.png" width="99" height="99" alt=""/><!-- user image --></td>
<td><!-- add user text -->
<div class="form-group">
<div class="row">
<label class="col-md-3 control-label text-right" for="email"><strong>Email</strong></label>
<div class="col-md-6">
<input id="email" name="email" type="email" placeholder="Email" class="form-control">
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<label class="col-md-3 control-label text-right" for="fname"><strong>First Name</strong></label>
<div class="col-md-6">
<input id="fname" name="fname" type="text" placeholder="First name" class="form-control">
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<label class="col-md-3 control-label text-right" for="lname"><strong>Last Name</strong></label>
<div class="col-md-6">
<input id="lname" name="lname"...
JavaScript
$("#btnAddMoreUser").on("click",function(){
var newClass='newClass';
var $tableBody = $('#tblAddUser').find("tbody"),
$trLast = $tableBody.find("tr:last"),
$trNew = $trLast.clone().addClass(newClass);
$trLast.after($trNew);
});
$(".tr_clone_remove").on("click",function(){ //Once remove button is clicked
$(".newClass:first").remove(); //Remove field html
x--; //Decrement field counter
});