<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 ----------> <table class="table" id="myTable"> <thead> <tr> <th> Header </th> </tr> </thead> <tbody> <tr id="row0"> <td> <div class="input-group"> <label>#</label><input type="text" class="form-control" /> <input type="text" class="form-control" /> <input type="text" class="form-control" /> <button id="btn0" type="button" class="btn btn-primary" onclick="addRow(this)"> <span id="icon0" class="glyphicon glyphicon-plus"></span> </button> <span class="input-group-btn"> </span> </div> </td> </tr> </tbody> </table>

function addRow(input) { var table = document.getElementById("myTable"); var i = parseInt(input.id.substring(3, input.id.length)); document.getElementById('icon' + i).className = "glyphicon glyphicon-minus"; var row = table.insertRow(table.rows.length); row.id = "row" + (i + 1); var cell = row.insertCell(0); cell.innerHTML = '<div class="input-group">'+ '<label>'+(i+1)+'</label><input type="text" class="form-control" />'+ '<input type="text" class="form-control" />'+ '<input type="text" class="form-control" />'+ '<input type="text" class="form-control" />'+ '<span class="input-group-btn">'+ '<button id="btn'+(i+1)+'" type="button" class="btn btn-primary" onclick="addRow(this)">'+ '<span id="icon'+(i+1)+'" class="glyphicon glyphicon-plus"></span>'+ '</button>'+ '</span>'+ '</div>'; $('#btn'+i).attr('onclick', 'remRow(this)'); } function remRow(input) { var table = document.getElementById("myTable"); var i = parseInt(input.id.substring(3, input.id.length)); var ind = table.rows["row" +i].rowIndex; table.deleteRow(ind); }