Delegated EventHandler - specific modal depending on tab - Active - event-handling

Question

I'm wanting to display one of three modals upon the click of one button in the navbar, depending on which of the the three tabs is active. I am trying to use the delegated eventhandler, however my computer skills are relatively immature and I am getting all three modals come up.
The modal ids are id="createModal", "createModalD" and "createModalL" for the employee, department and location data.
//SHOW ADD EMPLOYEE MODAL
$("nav").on("click", "#Ebutton", function (e) {
e.preventDefault();
$("#createModal").modal("show");
//$("#createModal").modal("");
});
$(".nav-tab loc").on("click", "createModal", function (e) {
$("#createModalD").modal("hide");
$("#createModalL").modal("hide");
});
//SHOW ADD DEPARTMENT MODAL
$("nav").on("click", ".Dbutton", function (e) {
e.preventDefault();
$("#createModalD").modal("show");
//$("#createModalD").modal("");
});
$(".Dbutton").on("click", "createModalD", function (e) {
$("#createModalL").modal("hide");
$("#createModal").modal("hide");
});
// //SHOW ADD LOCATION MODAL
$("nav").on("click", "#Ebutton", function (e) {
e.preventDefault();
$("#createModalL").modal("show");
// $("#createModalL").modal("");
});
$("#Ebutton").on("click", "createModalL", function (e) {
$("#createModalD").modal("hide");
$("#createModal").modal("hide");
});
!-- NAVIGATION BAR -->
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
<div class="container">
<!-- Add Button -->
<button role="button" class="Dbutton"id="Ebutton"><i class="fas fa-plus"></i></button>
<button class="navbar-toggler fixed" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse " id="navbarSupportedContent">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="index-tab" data-bs-toggle="tab" data-bs-target="#index" type="button" role="tab" aria-controls="index" aria-selected="true">Employee</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link " id="department-tab" data-bs-toggle="tab" data-bs-target="#department" type="button" role="tab" aria-controls="department" aria-selected="false">Department</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="loc-tab" data-bs-toggle="tab" data-bs-target="#loc" type="button" role="tab" aria-controls="loc" aria-selected="false">Location</button>
</li>
</ul>
</div>
</nav>