JavaScript函数只能打开一个菜单

我建立了两个离线侧边栏，其中一个是在右边，包括正常的菜单的webapp，第二个应该是一个通知侧边栏，问题是，左边的工作完美。当我点击汉堡包图标时，它会打开左侧栏，但当我点击另一个图标时，什么也没发生，右侧栏不会打开，谷歌Chrome控制台，显示没有错误。

第一个是希望打开左侧栏的链接，目前为止是有效的。右边是通知侧边栏，它不会打开。

jsfiddle

<a href="#" id="open-pulse-sidebar"><i class="icon-menu circle-icon"></i></a>
<a href="#" id="open-notification-sidebar"><i class="icon-globe circle-icon"></i></a>

左侧工作边栏的Html

<div class="pulse-sidebar">
    <div class="sidebar-bg clearfix">
        <div class="sidebar-profile">
            <img src="img/users/avatar.jpg" class="sidebar-img" alt="Candice Swanepoel" title="Candice Swanepoel" />
            <h5>Candice Swanepoel</h5>
        </div>
    </div>
    <ul>
        <li><a href="#">Dashboard</a></li>
        <li><a href="#">Models</a></li>
        <li><a href="#">Kunden</a></li>
        <li><a href="#">Finanzen</a></li>
        <li><a href="#">Mitarbeiter</a></li>
        <li><a href="#">Einstellung</a></li>
    </ul>
    
    <div class="sidebar-logout">
        <a href="#">
            <i class="icon-logout circle-icon"></i>
            <h5>Logout</h5>
        </a>
    </div>
</div>

和右边栏的HTML -它在

<div class="notification-sidebar">
    
    <ul>
        <li><a href="#">Dashboard</a></li>
        <li><a href="#">Models</a></li>
        <li><a href="#">Kunden</a></li>
        <li><a href="#">Finanzen</a></li>
        <li><a href="#">Mitarbeiter</a></li>
        <li><a href="#">Einstellung</a></li>
    </ul>
    
</div>

这是我的JavaScript和它们的CSS

// Toggle Pulse Sidebar
$('#open-pulse-sidebar').click(function() {
  $('.pulse-sidebar').toggleClass('active')
})
$(document).click(function(e) {
  var sidebar = $(".pulse-sidebar, #open-pulse-sidebar");
  if (!sidebar.is(e.target) && sidebar.has(e.target).length === 0) {
    sidebar.removeClass('active')
  }
});
// Toogle Notification Sidebar
$('#open-notification-sidebar').click(function() {
  $('.notification-sidebar').toggleClass('active')
})
$(document).click(function(e) {
  var sidebar = $(".notification-sidebar, #open-notification-sidebar");
  if (!sidebar.is(e.target) && sidebar.has(e.target).length === 0) {
    sidebar.removeClass('active')
  }
});

.pulse-sidebar {
  height: 100%;
  width: 19.24em;
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  background-color: #fff;
  overflow-x: hidden;
  transform: translateX(-120%);
  transition: all 0.4s ease-in;
  -webkit-box-shadow: 2px 0px 13px 0px rgba(0,0,0,0.4);
  -moz-box-shadow: 2px 0px 13px 0px rgba(0,0,0,0.4);
  box-shadow: 2px 0px 13px 0px rgba(0,0,0,0.4);
}
.notification-sidebar {
  height: 100%;
  width: 19.24em;
  position: fixed;
  z-index: 9999;
  top: 0;
  right: 0;
  background-color: #fff;
  overflow-x: hidden;
  transform: translateX(120%);
  transition: all 0.4s ease-in;
  -webkit-box-shadow: 2px 0px 13px 0px rgba(0,0,0,0.4);
  -moz-box-shadow: 2px 0px 13px 0px rgba(0,0,0,0.4);
  box-shadow: 2px 0px 13px 0px rgba(0,0,0,0.4);
}