JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<div class="container-fluid cloned-row" id="div" name="div">
    <div class="row-fluid">    
        <div class="col-xs-12">
            <div id="div_form1">
                <input type = "text" id="txt_fname" name="txt_fname" placeholder="First Name"/>
                 
                <button class="plus"></button>
                <button class="minus"></button>
            </div>
        </div>
    </div>
</div>

CSS

.plus:before{
    content:"\f055";
    font-family:FontAwesome;
    border:0px;
}
.minus:before{
    content:"\f056";
    font-family:FontAwesome;
    border:0px;
}

.cloned-row .plus {
    display: none;
}

.cloned-row:last-child .minus {
    display: none;
}

.cloned-row:last-child .plus {
    display: inline-block;
}

JavaScript

var i=1;
$("body").on("click", ".plus", function (){
   $(".cloned-row:first").clone().insertAfter(".cloned-row:last").attr({
          'id': function(_, id) { return id + i },
          'name': function(_, name) { return name + i }
          //'value': ''
   });
  i++;
});