I'm attempting to develop a webpage with multiple tabs, each containing a table with buttons that open modals on each row. My code functions properly when only one tab contains a modal. However, when I have 2 or more tabs with modals, the content from both tabs appears on a single page instead of being separated into distinct tabs.
Below is the code snippet:
edit-profile.ejs:
<ul class="nav nav-tabs tabs-left">
<li class="active"><a href="#edit1" data-toggle="tab">Edit 1</a></li>
<li><a href="#edit2" data-toggle="tab">Edit 2</a></li>
</ul>
<div class="col-xs-9">
<div class="tab-content">
<div class="tab-pane active" id="edit1">
<div id="edit1">
<% include ./partials/edit-profile/_edit1%>
</div>
</div>
<div class="tab-pane" id="edit2">
<div id="edit2">
<% include ./partials/edit-profile/_edit2%>
</div>
</div>
<center><button type="submit" class="btn btn-default" data-toggle="modal" data-target=".bd-example-modal-sm">Submit</button></center>
In my _edit1.ejs partial, I have:
<table id="edit1-table" class="table table-striped table-bordered order-table dt-responsive">
<thead>
<tr>
<th>User ID</th>
<th>Email</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr>
<td><span class="glyphicon glyphicon-plus" data-toggle="modal" data-target="#edit1-modal"></span> User 1</td>
<td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cbbeb8aeb9fa8bbfaeb8bfe5a8a4a6">[email protected]</a></td>
<td>Address1</td>
</tr>
<tr>
<td> <span class="glyphicon glyphicon-plus" data-toggle="modal" data-target="#edit1-modal"></span> User 2</td>
<td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="17626472652557637264633974787a">[email protected]</a></td>
<td>Address2</td>
</tr>
</tbody>
</table>
<div id="edit1-modal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"> Edit 1 </h4>
</div>
<div class="modal-body">
<% include ./_edit1-form %>
<div class="modal-footer">
<button type="submit" class="btn btn-default pull-left">Submit</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#edit1-table').DataTable();
} );
</script>
Similar content exists in _edit2.js:
<table id="edit2-table" class="table table-striped table-bordered order-table dt-responsive">
<thead>
<tr>
<th>User ID</th>
<th>Email</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr>
<td><span class="glyphicon glyphicon-plus" data-toggle="modal" data-target="#edit2-modal"></span> User 1</td>
<td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e792948295d6a793829493c984888a">[email protected]</a></td>
<td>Address1</td>
</tr>
<tr>
<td> <span class="glyphicon glyphicon-plus" data-toggle="modal" data-target="#edit2-modal"></span>User 2</td>
<td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9ce9eff9eeaedce8f9efe8b2fff3f1">[email protected]</a></td>
<td>Address2</td>
</tr>
</tbody>
</table>
<div id="edit2-modal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"> Edit 2 </h4>
</div>
<div class="modal-body">
<% include ./_edit2-form %>
<div class="modal-footer">
<button type="submit" class="btn btn-default pull-left">Submit</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#edit2-table').DataTable();
} );
</script>
Can anyone provide insight as to why my tables are merging onto the same page when both tabs contain modals, despite having different IDs?