<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="col-xs-12"> <div class="col-md-12" > <h3> Actions</h3> <div id="field"> <div id="field0"> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="action_id">Action Id</label> <div class="col-md-5"> <input id="action_id" name="action_id" type="text" placeholder="" class="form-control input-md"> </div> </div> </div> </div> <!-- Button --> <div class="form-group"> <div class="col-md-4"> <button id="add-more" name="add-more" class="btn btn-primary">Add More</button> </div> </div> <br><br> </div> </div> </div>

$(document).ready(function() { //@naresh action dynamic childs var next = 0; $("#add-more").click(function(e) { e.preventDefault(); var addto = "#field" + next; var addRemove = "#field" + (next); next = next + 1; var newIn = ' <div id="field' + next + '" name="field' + next + '"><!-- Text input--><div class="form-group"> <label class="col-md-4 control-label" for="action_id">Action Id</label> <div class="col-md-5"> <input id="action_id" name="action_id" type="text" placeholder="" class="form-control input-md"> </div></div>'; var newInput = $(newIn); var removeBtn = '<button id="remove' + (next - 1) + '"class="btn btn-danger remove-me" >Remove</button></div></div><div id="field">'; var removeButton = $(removeBtn); $(addto).after(newInput); $(addRemove).after(removeButton); $("#field" + next).attr('data-source', $(addto).attr('data-source')); $("#count").val(next); $('.remove-me').click(function(e) { e.preventDefault(); var fieldNum = this.id.charAt(this.id.length - 1); var fieldID = "#field" + fieldNum; $(this).remove(); $(fieldID).remove(); }); }); });