JSFiddle - React, Tailwind, and code Playground

by dying_sakura

HTML

<div class="user-details">
          <div class="user_data">
            <div class="form-group">
              <label class="control-label">Student Name</label>
              <input name="name" class="form-control"  autocomplete="false" type="text">
            </div>
            <div class="form-group">
              <label class="control-label">Permanent Address</label>
             <input name="address" class="form-control" autocomplete="false" type="text">
            </div>
            <div class="form-group">
              <label class="control-label">Phone No.</label>
             <input name="phone" class="form-control" autocomplete="false" type="text">
            </div>
           
            
          </div>
</div>
<div class="form-group">
          <input value="Add More" class="add_details" autocomplete="false" type="button">
</div>

JavaScript

$(".add_details").click(function(){
    
   
        $(".user-details").append(' <div class="user_data"><div class="form-group"><label class="control-label">Student Name</label><input name="name" class="form-control"  autocomplete="false" type="text"></div><div class="form-group"><label class="control-label">Permanent Address</label><input name="address" class="form-control" autocomplete="false" type="text"></div><div class="form-group"><label class="control-label">Phone No.</label><input name="phone" class="form-control" autocomplete="false" type="text"></div><button class="remove-btn" data-toggle="tooltip" data-placement="top" title="Delete"><i class="fa fa-trash-o" aria-hidden="true"></i>X</button></div>');
    
          
  });

$("body").on("click",".remove-btn",function(e){
       $(this).parents('.user_data').remove();
  });