<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/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="container"> <div class="row clearfix"> <div class="col-md-12 column"> <table class="table table-bordered table-hover table-striped" id="tab_logic"> <thead> <tr> <th class="text-center"> Information Type </th> <th class="text-center"> Confidentiality </th> <th class="text-center"> Integrity </th> <th class="text-center"> Availability </th> </tr> </thead> <tbody> <tr id="infotype0"> <td> <input type="text" name="it0" class="form-control" placeholder="Information Type"> </td> <td> <select class="form-control"> <option>Severity</option> <option>Limited Adverse Effect</option> <option>Serious Adverse Effect</option> <option>Catastrophic Adverse Effect</option> </select> </td> <td> <select class="form-control"> <option>Severity</option> <option>Limited Adverse Effect</option> <option>Serious Adverse Effect</option> <option>Catastrophic Adverse Effect</option> </select> </td> <td> <select class="form-control"> <option>Severity</option> <option>Limited Adverse Effect</option> <option>Serious Adverse Effect</option> <option>Catastrophic Adverse Effect</option> </select> </td> </tr> <tr id="infotype1"></tr> <tr> <td> <button id="add-row" type="button" class="btn btn-default btn-md center-block"> <span class="glyphicon glyphicon-plus"></span> Add New Information Type </button> </td> <td></td> <td></td> <td></td> </tr> </tbody> </table> </div> </div> </div><!-- end container -->

.limited { background-color: #fdda7c; } .serious { background-color: #fab567; } .catastrophic { background-color: #f2635d; }

$(document).ready(function(){ // Counter var i = 1; // Add a row. $("#add-row").click(function(){ // Populate the existing "next" row. $('#infotype'+i).html("<td><input type='text' class='form-control' placeholder='Information Type'></td><td><select class='form-control'><option>Limited Adverse Effect</option><option>Serious Adverse Effect</option><option>Catastrophic Adverse Effect</option></select></td><td><select class='form-control'><option>Limited Adverse Effect</option><option>Serious Adverse Effect</option><option>Catastrophic Adverse Effect</option></select></td><td><select class='form-control'><option>Limited Adverse Effect</option><option>Serious Adverse Effect</option><option>Catastrophic Adverse Effect</option></select></td></tr>"); // Append a new row to `tbody` in the DOM but not displayed in the UI. $('#tab_logic').append('<tr id="infotype'+(i+1)+'"></tr>'); i++; }); // Delete a row. $(".delete-row").click(function(){ alert(this); }); });