<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 ----------> <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 ----------> <script src='//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js'></script> <div class='container-fluid'> <div class='row clearfix'> <div class='col-md-12 table-responsive text-center align-middle'> <table class='table table-bordered table-sm table-striped table-sortable' id='huntList'> <thead> <tr > <th style='width: 30%' class='text-center'> Hunt Group Name </th> <th style='width: 7%' class='text-center'> Extension </th> <th style='width: 15%' class='text-center'> Phone Number </th> <th style='width: 10%' class='text-center'> Ring Pattern </th> <th class='text-center'> Notes </th> <th style='width: 5%' class='text-center'> Remove </th> </tr> </thead> <tbody> <tr id='hunt0'> <tr> <td data-name='deptName'> <input type='text' name='hunt0' placeholder='Department Name' class='form-control'/> </td> <td data-name='extension'> <input type='text' name='huntExt0' placeholder='Ext.' class='form-control'/> </td> <td data-name='phone'> <input type='text' name='huntPhone0' placeholder='XXX-XXX-XXXX' class='form-control'/> </td> <td data-name='ring-pattern'> <select name='pattern0'> <option value='1'>Regular</option> <option value='2'>Simultaneous</option> <option value='3'>Rotorary</option> <option value='4'>Longest Waiting</option> </select> </td> <td data-name='note'> <textarea name='huntDesc0' placeholder='Description' rows='3' class='form-control'></textarea> </td> <td data-name='del'> <button id='huntDel0' onclick="removeHunt(this)" class='btn btn-danger glyphicon glyphicon-remove'><span aria-hidden='true'>×</span></button> </td> </tr> <tr> <td colspan='6'> <div class="panel-group"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" href="#huntExtensions0">Extensions</a> </h4> </div> <div id="huntExtensions0" class="panel-collapse collapse"> <div> <label class="checkbox-inline"><input type="checkbox" value="">1 Jane</label> <label class="checkbox-inline"><input type="checkbox" value="">54 Bob</label> <label class="checkbox-inline"><input type="checkbox" value="">1548 Greg</label> </div> </div> </div> </div> </td> </tr> </tr> <tr id='hunt1'></tr> </tbody> </table> <button id = 'addHunt' onclick="addHunt()" type='button' class='btn btn-primary btn-lg btn-block'>Add Hunt group</button> </div> </div> </div> <script> var extArr = [1]; var hunt = 1; function departmentNumber(button){ var name = $(button).attr("id"); return name[name.length-1] } function removeHunt(button){ var huntNum = departmentNumber(button); $('#hunt' + huntNum).remove(); } function addHunt(){ $('#hunt' + hunt).html("<tr><td data-name='deptName'><input type='text' name='hunt" + hunt + "' placeholder='Department Name' class='form-control'/></td><td data-name='extension'><input type='text' name='huntExt" + hunt + "' placeholder='Ext.' class='form-control'/></td><td data-name='phone'><input type='text' name='huntPhone" + hunt + "' placeholder='XXX-XXX-XXXX' class='form-control'/></td><td data-name='ring-pattern'><select name='pattern" + hunt + "'><option value='1'>Regular</option><option value='2'>Simultaneous</option><option value='3'>Rotorary</option><option value='4'>Longest Waiting</option></select></td><td data-name='note'><textarea name='huntDesc" + hunt + "' placeholder='Description' rows='3' class='form-control'></textarea></td><td data-name='del'><button id='huntDel" + hunt + "' onclick='removeHunt(this)' class='btn btn-danger glyphicon glyphicon-remove'><span aria-hidden='true'>×</span></button></td></tr><tr><td colspan='6'><div class='panel-group'><div class='panel panel-default'><div class='panel-heading'><h4 class='panel-title'><a data-toggle='collapse' href='#huntExtensions" + hunt + "'>Extensions</a></h4></div><div id='huntExtensions" + hunt + "' class='panel-collapse collapse'><div><label class='checkbox-inline'><input type='checkbox' value=''>1 Jane</label><label class='checkbox-inline'><input type='checkbox' value=''>54 Bob</label><label class='checkbox-inline'><input type='checkbox' value=''>1548 Greg</label></div></div></div></div></td></tr>"); $('#huntList').append('<tr id="hunt' + (hunt+1) + '"></tr>'); hunt++; } </script>