Уведомления о значках предупреждений

const bell = document.querySelector("#bell");
const notifications = document.querySelector('#notifications');
const alertBtn = document.querySelector(".active-alert")


bell.addEventListener("click", () => {
  /* alertBtn.style.color = "white"; Removed */
  
  /* Hide button */
  alertBtn.style.display = "none";
  
  notifications.innerHTML += `   <div class = "member">
    <li>
      <span>Notifaction 1</span>
    </li>   </div>   <div class = "member">
    <li>
      <span>Notifaction 2</span>
    </li>   </div>`;
});

.member {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin: auto;
  text-align: center;
  background-color: darkgrey;
}

#notifications {
  /* position: fixed; Removed */
  width: 50%;
  /* top: 70px; Removed */
  /* right: 0px; Removed */
  padding: 0; /* Added */
  margin-top: 0 /* Added */
}

/* Added */
.bell {
  display: flex;
  flex-direction: column;
}

<header>
  <div class = "header">
    <div class = "logo">
      <h1>YourApp™</h1>
    </div>
    <div class = "userProfile">
      <div class = "bell">
        <img id = "bell" src = "icons/icon-bell.svg" alt = "notifications" height = "30" width = "30" />
        <p class = "active-alert">&#9679;</p>
        <ul id = "notifications"></ul>
      </div>
      <div class = "user">
        <img src = "images/member-1.jpg" alt = "Image of member 1" title = "image_user_1">
        <p>Member 1</p>
      </div>
    </div>
  </div>
</header>