"Add & Remove"
Bootstrap 4.1.1 Snippet by Umerfarooq

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html> <head> <title>Add & Remove</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> </head> <body> <div class="container"> <h2 align="center">Add & Remove </h2> <form action="#" method="POST"> <table class="table table-bordered" id="dynamicTable"> <tr> <th>Name</th> <th>Qty</th> <th>Price</th> <th>Action</th> </tr> <tr> <td><input type="text" name="" placeholder="Enter Name" class="form-control" /></td> <td><input type="number" name="" placeholder="Enter Qty" class="form-control" /></td> <td><input type="text" name="" placeholder="Enter Price" class="form-control" /></td> <td><button type="button" name="" id="add" class="btn btn-success">Add More</button></td> </tr> </table> <button type="submit" class="btn btn-success">Save</button> </form> </div> <script> var i = 0; $("#add").click(function(){ ++i; $("#dynamicTable").append('<tr><td><input type="text" name="addmore['+i+'][name]" placeholder="Enter Name" class="form-control" /></td><td><input type="text" name="addmore['+i+'][qty]" placeholder="Enter Qty" class="form-control" /></td><td><input type="text" name="addmore['+i+'][price]" placeholder="Enter Price" class="form-control" /></td><td><button type="button" class="btn btn-danger remove-tr">Remove</button></td></tr>'); }); $(document).on('click', '.remove-tr', function(){ $(this).parents('tr').remove(); }); </script> </body> </html>

Related: See More

Vue Paper Dashboard
Dynamic Form Fields - Add & Remove BS3
Dynamic Form Fields - Add & Remove

Questions / Comments: