为什么jquery on（）函数不能与id或类一起使用？

Question

我在同一页面中有两个菜单，我正在更改菜单的图标on('shown')事件。 jQuery函数在第一个html下正常工作，但它不适用于第二个（相同的html）。

HTML

<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle  repnsive-navbar-toggle">
    <div id="navbar-hamburger">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </div>
    <div id="navbar-close" class="hidden">
        <span class="glyphicon glyphicon-remove"></span>
    </div>
</button>

JS

$(function() {
  $('#navbarCollapse')
    .on('shown.bs.collapse', function() {
      $('#navbar-hamburger').addClass('hidden');
      $('#navbar-close').removeClass('hidden');    
    })
    .on('hidden.bs.collapse', function() {
      $('#navbar-hamburger').removeClass('hidden');
      $('#navbar-close').addClass('hidden');        
    });
});

我尝试使用此class中的id和$('#navbarCollapse')处理此问题。但第二个菜单不起作用。是否有可能为第二个菜单添加类或ID，而不是更改data-target="#navbarCollapse"。