<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <h2>Dynamic insertion of rows into a table</h2> <div class="row"> <div class="col-xs-4"> <label for="name">Name</label> <input type="text" class="form-control" id="name"> </div> <!-- col --> <div class="col-xs-4"> <label for="name">Age</label> <input type="text" class="form-control" id="name"> </div> <!-- col --> <div class="col-xs-4"> <label for="name">E-mail</label> <input type="text" class="form-control" id="name"> </div> <!-- col --> </div> <div class="row"> <div class="col-xs-12"> <div class="table-container"> <table class="table"> <thead> <tr> <th>Name</th> <th>Age</th> <th>E-mail</th> </tr> </thead> <tbody> <!-- dynamic data --> </tbody> </table> <p class="info">No data to display.</p> </div> <!-- table-container --> <button type="button" id="addRow">Add Row</button> </div> <!-- col --> </div> <!-- row --> </div> <!-- container -->

(function($, window, document) { })(jQuery, window, document);