Делегированный обработчик событий — конкретный модальный режим в зависимости от вкладки — активный

Question

Я хочу отобразить один из трех модальных окон при нажатии одной кнопки на панели навигации, в зависимости от того, какая из трех вкладок активна. Я пытаюсь использовать делегированный обработчик событий, однако мои навыки работы с компьютером относительно незрелые, и у меня появляются все три модальных окна.
Модальные идентификаторы: id="createModal", "createModalD" и "createModalL" для данных о сотруднике, отделе и местоположении.

      //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>