<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' id='deptList'> <tr id='list0'> <td> <table class='table table-bordered table-sm table-striped table-sortable' id='extList0'> <thead> <tr> <td colspan='7' data-name='deptName'> <input type='text' name='dept0' placeholder='Department Name' class='form-control'/> </td> <td data-name='del'> <button id='deptDel0' onclick="removeDepartment(this)" class='btn btn-danger glyphicon glyphicon-remove'><span aria-hidden='true'>×</span></button> </td> </tr> <tr > <th style='width: 5%' class='text-center'> Extension </th> <th class='text-center'> Name </th> <th class='text-center'> Email </th> <th style='width: 10%' class='text-center'> Phone Number </th> <th style='width: 5%' class='text-center'> Device </th> <th style='width: 5%' class='text-center'> 911 Address </th> <th class='text-center'> Notes </th> <th style='width: 5%' class='text-center'> remove </th> </tr> </thead> <tbody> <tr id='addr0-0'> <td data-name='extension'> <input type='text' name='ext0-0' placeholder='Ext.' class='form-control'/> </td> <td data-name='name'> <input type='text' name='name0-0' placeholder='Name' class='form-control'/> </td> <td data-name='mail'> <input type='text' name='email0-0' placeholder='john.doe@email.com' class='form-control'/> </td> <td data-name='phone'> <input type='text' name='phone0-0' placeholder='XXX-XXX-XXXX' class='form-control'/> </td> <td data-name='device'> <select name='device0-0'> <option value=''>Select Device</option> <option value='1'>Option 1</option> <option value='2'>Option 2</option> <option value='3'>Option 3</option> </select> </td> <td data-name='emsAddr'> <select name='emsAddr0-0'> <option value='1'>Address 1</option> <option value='2'>Address 2</option> <option value='3'>Address 3</option> </select> </td> <td data-name='note'> <textarea name='desc0-0' placeholder='Description' rows='3' class='form-control'></textarea> </td> <td data-name='del'> <button id='extDel0-0' onclick="removeExtension(this)" class='btn btn-danger glyphicon glyphicon-remove row-remove'><span aria-hidden='true'>×</span></button> </td> </tr> <tr id='addr0-1'></tr> </tbody> <tr> <td colspan='7'> </td> <td> <button id='addExt0' onclick="addExtension(this)" class='btn btn-primary float-right ext-add'>Add Extension</button> </td> </tr> </table> </td> </tr> <tr id='list1'></tr> </table> </div> </div> <button id = 'addDept' onclick="addDepartment()" type='button' class='btn btn-primary btn-lg btn-block'>Add Department</button> </div> <script> var arrDept = [1]; arrDept[0] = 1; function departmentNumber(button){ var name = $(button).attr("id"); return name[name.length-1] } function removeExtension(button){ $(button).closest("tr").remove(); } function removeDepartment(button){ var dept = departmentNumber(button); $('#list' + dept).remove(); arrDept[dept] = 0; } function addExtension(button){ var dept = departmentNumber(button); var ext = arrDept[dept]; $('#addr' + dept + '-' + ext).html("<td data-name='extension'><input type='text' name='ext" + dept + "-" + ext + "' placeholder='Ext.' class='form-control'/></td><td data-name='name'><input type='text' name='name" + dept + "-" + ext + "' placeholder='Name' class='form-control'/></td><td data-name='mail'><input type='text' name='email" + dept + "-" + ext + "' placeholder='john.doe@email.com' class='form-control'/></td><td data-name='phone'><input type='text' name='phone" + dept + "-" + ext + "' placeholder='XXX-XXX-XXXX' class='form-control'/></td><td data-name='device'><select name='device" + dept + "-" + ext + "'><option value=''>Select Device</option><option value='1'>Option 1</option><option value='2'>Option 2</option><option value='3'>Option 3</option></select></td><td data-name='emsAddr'><select name='emsAddr" + dept + "-" + ext + "'><option value='1'>Address 1</option><option value='2'>Address 2</option><option value='3'>Address 3</option></select></td><td data-name='note'><textarea name='desc" + dept + "-" + ext + "' placeholder='Description' rows='3' class='form-control'></textarea></td><td data-name='del'><button id='extDel" + dept + "-" + ext + "' onclick='removeExtension(this)' class='btn btn-danger glyphicon glyphicon-remove row-remove'><span aria-hidden='true'>×</span></button></td>" ); $('#extList' + dept).append('<tr id="addr' + (dept) + '-' + (ext+1) + '"></tr>'); arrDept[dept]++; } function addDepartment(){ dept = arrDept.length; arrDept.push(1); $('#list' + dept).html("<td><table class='table table-bordered table-sm table-striped table-sortable' id='extList" + dept + "'><thead><tr><td colspan='7' data-name='deptName'><input type='text' name='dept" + dept + "' placeholder='Department Name' class='form-control'/></td><td data-name='del'><button id='deptDel" + dept + "' onclick='removeDepartment(this)' class='btn btn-danger glyphicon glyphicon-remove'><span aria-hidden='true'>×</span></button></td></tr><tr><th style='width: 5%' class='text-center'>Extension</th><th class='text-center'>Name</th><th class='text-center'>Email</th><th style='width: 10%' class='text-center'>Phone Number</th><th style='width: 5%' class='text-center'>Device</th><th style='width: 5%' class='text-center'>911 Address</th><th class='text-center'>Notes</th><th style='width: 5%' class='text-center'>remove</th></tr></thead><tbody><tr id='addr" + dept + "-0'><td data-name='extension'><input type='text' name='ext" + dept + "-0' placeholder='Ext.' class='form-control'/></td><td data-name='name'><input type='text' name='name" + dept + "-0' placeholder='Name' class='form-control'/></td><td data-name='mail'><input type='text' name='email" + dept + "-0' placeholder='john.doe@email.com' class='form-control'/></td><td data-name='phone'><input type='text' name='phone" + dept + "-0' placeholder='XXX-XXX-XXXX' class='form-control'/></td><td data-name='device'><select name='device" + dept + "-0'><option value=''>Select Device</option><option value='1'>Option 1</option><option value='2'>Option 2</option><option value='3'>Option 3</option></select></td><td data-name='emsAddr'><select name='emsAddr" + dept + "-0'><option value='1'>Address 1</option><option value='2'>Address 2</option><option value='3'>Address 3</option></select></td><td data-name='note'><textarea name='desc" + dept + "-0' placeholder='Description' rows='3' class='form-control'></textarea></td><td data-name='del'><button id='extDel" + dept + "-0' onclick='removeExtension(this)' class='btn btn-danger glyphicon glyphicon-remove row-remove'><span aria-hidden='true'>×</span></button></td></tr><tr id='addr" + dept + "-1'></tbody></tr><tr><td colspan='7'></td><td><button id='addExt" + dept + "' onclick='addExtension(this)' class='btn btn-primary float-right ext-add'>Add Extension</button></td></tr></table></td>"); $('#deptList').append('<tr id="list' + (dept + 1) + '"></tr>'); } </script>