Контент во втором варианте всплывающей вкладки ничего не показывает

У меня есть всплывающая вкладка, где пользователи могут проверять свои сообщения, а другая - их уведомления. В настоящее время, когда в моем коде есть только это:

<div class = "inbox active" id = "inbox">      
  <form action = "includes/chatsearch-inc.php" method = "POST">
    <input type = "text" name = "search" placeholder = "Search a user or applicant\'s name">
    <button name = "submit"><i class = "fa fa-search"></i></button>
  </form>
</div>      
<div class = "notifications" id = "notifications">
  <div class = "notifications__container" onclick = "location.href=\'job?jid='.$jobsid.'\'"> 
  <img src = "profilepic/'.$notifsusersprofilepic.'" alt = "'.$notifsusersname.'\'s profile picture" class = "profilepic">
  <div class = "notifications__info__container">
       <p class = "notifications__info"><b>'.$notifsusersname.'</b> applied to your job listing. </p>
       <p class = "notifications__info date">'.$notifsdate.'</p>
  </div>
</div>
<hr class = "notifications__divider">
</div>

А CSS это:

.tabs {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 75%;
  height: 75%;
  background: #fff;
  padding:2em;
  overflow:hidden;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.2);
  border-radius: var(--border-radius);
  z-index: 102;
}

.tabs .tab-header {
  height:3rem;
  display:flex;
  align-items: center;
}

.tabs #close_header_tabs {
  display: flex;
  justify-content: flex-end;
}

.tabs .tab-header > div {
  width:calc(100% / 2);
  text-align:center;
  color:#888;
  font-weight:600;
  cursor:pointer;
  font-size:.85em;
  text-transform:uppercase;
  outline:none;
  transition: color 0.2s;
}

.tabs .tab-header > div > i {
  display:block;
  margin-bottom:5px;
}

.tabs .tab-header > div.active {
  color:#00acee;
}

.tabs .tab-header > div.active > i {
  display:block;
  color: #8bc34a;
  margin-bottom:.3rem;
}

.tabs .tab-indicator {
  position:relative;
  width:calc(100% / 2);
  height:.3rem;
  background:#00acee;
  left:0px;
  border-radius:var(--border-radius);
  transition:all 500ms ease-in-out;
}

.tabs .tab-body {
  position:relative;
  height:calc(100% - 60px);
  padding:.6em .3em;
}

.tabs .tab-body > div {
  position:absolute;
  top:-200%;
  opacity:0;
  transform:scale(0.9);
  transition:opacity 500ms ease-in-out 0ms,
  transform: 500ms ease-in-out 0ms;
}

.tabs .tab-body > div.active {
  top:0px;
  opacity:1;
  transform:scale(1);
}

.tabs .tab-header > div:hover {
  color:#00acee;
}

.tabs .tab-body .notifications , .tabs .tab-body .inbox {
  margin: 1em 0 2em;
  border: 1.5px solid #d4d4d4;
  border-radius: var(--border-radius);
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  max-height: 90%;
  overflow: scroll;
  overflow-x: hidden;
}

.tabs .tab-body .inbox form {
  height: 5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0;
}

.tabs .tab-body .inbox form input {
  width: 75%;
  padding: 0.75rem;
  box-sizing: border-box;
  border-radius: var(--border-radius);
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border: 1px solid #dddddd;
  outline: none;
  background: #eeeeee;
  overflow: hidden;
  transition: background 0.2s, border-color 0.2s;
}

.tabs .tab-body .inbox form input:focus {
  border-color: var(--color-primary);
  background: #ffffff;
}

.tabs .tab-body .inbox form button {
  width: 3em;
  padding: .6em;
  background: #2196F3;
  border-radius: var(--border-radius);
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  color: white;
  font-size: 17px;
  border: 1px solid var(--color-primary);
  border-left: none;
  cursor: pointer;
}

.tabs .tab-body .notifications .notifications__container , .tabs .tab-body .inbox .inbox__container {
  margin: .5em;
  padding: 1em;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: auto;
  cursor: pointer;
}

.tabs .tab-body .notifications .none, .tabs .tab-body .inbox .none {
  cursor: default;
}

.tabs .tab-body .notifications .notifications__container .profilepic , .tabs .tab-body .inbox .inbox__container .profilepic {
  width: 3.5rem;
  height: 3.5rem;
  background-position: center;
  border-radius: 50%;
}

.tabs .tab-body .notifications .notifications__container .notifications__info__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.tabs .tab-body .notifications .notifications__container .notifications__info__container .notifications__info {
  margin: 0 1em;
  font: 500 1rem 'Quicksand', sans-serif;
}

.tabs .tab-body .notifications .notifications__container .notifications__info__container .date {
  margin-top: .5em;
  font-size: .8em;
  color: grey;
}

.tabs .tab-body .notifications .notifications__divider , .tabs .tab-body .inbox .inbox__divider{
  border: 1px solid #d4d4d4;
  width: 99%;
}

И мой JS:

let tabHeader = document.getElementsByClassName("tab-header")[0];
let tabIndicator = document.getElementsByClassName("tab-indicator")[0];
let tabBody = document.getElementsByClassName("tab-body")[0];

let tabsPane = tabHeader.getElementsByTagName("div");

for(let i=0;i<tabsPane.length;i++){
    tabsPane[i].addEventListener("click",function(){
    tabHeader.getElementsByClassName("active")[0].classList.remove("active");
    tabsPane[i].classList.add("active");
    tabBody.getElementsByClassName("active")[0].classList.remove("active");
    tabBody.getElementsByTagName("div")[i].classList.add("active");
                
    tabIndicator.style.left = `calc(calc(100% / 2) * ${i})`;
    });
}

var backtotopbutton = document.getElementById("topButton");

window.onscroll = function() {scrollFunction()};

function scrollFunction() {
  if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
    backtotopbutton.style.display = "block";
  } else {
    backtotopbutton.style.display = "none";
  }
}


document.addEventListener("DOMContentLoaded", () => {
    const openMessages = document.getElementById("open_inbox");
    const openNotifications = document.getElementById("open_notifications");

    openMessages.addEventListener("click", function () {
        tabHeader.getElementsByClassName("active")[0].classList.remove("active");
        tabsPane[0].classList.add("active");
        tabBody.getElementsByClassName("active")[0].classList.remove("active");
        tabBody.getElementsByTagName("div")[0].classList.add("active");

        tabIndicator.style.left = `calc(calc(100% / 2) * ${0})`;
    });

    openNotifications.addEventListener("click", function () {
        tabHeader.getElementsByClassName("active")[0].classList.remove("active");
        tabsPane[1].classList.add("active");
        tabBody.getElementsByClassName("active")[0].classList.remove("active");
        tabBody.getElementsByTagName("div")[1].classList.add("active");

        tabIndicator.style.left = `calc(calc(100% / 2) * ${1})`;
    });
});

$(document).ready(function(){
    $('#topnav_button').click(function() {
        $('.nav').toggle(200);
    });
    $('#open_inbox, #open_notifications').click(function() {
        $('#navHeader').show(200);
    });
    $('#close_header_tabs').click(function() {
        $('#navHeader').hide(200);
    });
    $('#topButton').click(function() {
        $('body, html').animate({
            scrollTop:0
        },300);
    });
});

В блоке уведомлений есть sql для проецирования всех уведомлений, не включенных в этот вопрос, для минимизации кода. Он показывает как содержимое сообщений, так и вкладку уведомлений.

Но когда я добавил еще одну строку div во вкладку сообщений: пример:

<div class = "inbox active" id = "inbox">      
  <form action = "includes/chatsearch-inc.php" method = "POST">
    <input type = "text" name = "search" placeholder = "Search a user or applicant\'s name">
    <button name = "submit"><i class = "fa fa-search"></i></button>
  </form>
  <div>
  </div>
</div> 

и щелкните вкладку уведомлений, на вкладке уведомлений ничего не отображается, как на белом фоне.

Мне удалось проверить каждый бит моего CSS, но я вижу что-то не так, я что-то упускаю? Спасибо!

Обновлено: теперь я знаю, в чем проблема. Проблема в том, что когда я нажимаю вкладку уведомлений, он не переключает активный класс в DOM из папки «Входящие» на уведомления и не удаляет активный класс из папки «Входящие». Без указанного содержимого в почтовом ящике он работает безупречно. Это почему?