Add dynamic input form fields in onclick function with delete

Add dynamic input form field in onclick function with delete operation. This adding dynamic field is widely using in forms, this is most useful and frequently using operation for web developer. i hope this post will be really helpful most of them. this is very simple one. in future post i will explain you how make that dynamic insert into database. now let see the static function to make this.

DOWNLOAD LIVE DEMO

Here i'm make this with also help of bootstrap and fontawesome fonts. So first of all we need to add all the required jqueries and bootstrap files.

JQUERY, BOOTSTRAP AND FONT AWESOME

<link rel='stylesheet' href='bootstrap.min.css'>
    <script src="jquery-1.10.2.min.js"></script>
    <script src="bootstrap.min.js"></script>
  <link rel="stylesheet" href="font-awesome.min.css">

MAIN HTML CODE

<form method="post" action="" >    
<button type="button" class='addmore btn btn-primary'>+ Add One More</button>
<div class="row">
<div class="form-group col-md-6">
  <input type="text" name="name[]" value="" class="col-md-12" placeholder="Name"/>
</div>


<div class="form-group col-md-5">
  <input type="number" min="0" name="class[]" class="col-md-12" placeholder="Class"/>
</div>

<div class="form-group col-md-1" style="margin-top: 5px;">
  <a href="javascript:void(0)" title="Can not Delete">
    <p align="center"><i class="fa fa-ban" aria-hidden="true"></i></p></a>
</div>
</div>

<div class="row visble" ></div>
<input type="text" readonly name="row_count" id="row_count" value="1">


<button type="button" class='btn btn-primary'>Submit </button>

</form>

JAVASCRIPT

<script type="text/javascript">
$(".addmore").on('click',function(){
var row_cntr = $("#row_count").val();
row_cntr = parseInt(row_cntr) + 1;
var data ='<div class="deletedummyrow'+row_cntr+'"><div class="form-group col-md-6">
          <input type="text" name="name[]" value="" class="col-md-12" placeholder="
          Name'+row_cntr+'"/></div>';
    data +='<div class="form-group col-md-5"><input type="number" min="0" name="class[]" 
          class="col-md-12" placeholder="Class" value="" required="required"/></div>';
    data +='<div class="form-group col-md-1"><a href="javascript:void(0)" style="cursor: 
            pointer;" onclick="deletecheckyes('+row_cntr+')" class="deletecheckyes"  
            rel="deletecheck'+row_cntr+'" title="Delete"><p align="center">
            <i class="fa fa-times" aria-hidden="true"></i></p></a></div></div>'; 
$('.visble').append(data);
$("#row_count").val(row_cntr);
});


function deletecheckyes(ar)
{
var ttt = ar;
$(".deletedummyrow"+ttt+"").remove(".deletedummyrow"+ttt+"");
var i=Number($('#row_count').val());
i=i-1;
$('#row_count').val(i);
}


</script>