嵌套Bootstrap折叠活动类问题

Question

我有一个嵌套的Twitter bootstrap Repeater，我正在尝试使用以下脚本将活动类添加到打开的折叠中。

    function toggleChevronInner(e) {
        console.log('hello');
        $(e.target)
            .prev('.panel-heading')
            .find("i.indicator")
            .toggleClass('glyphicon-chevron-up glyphicon-chevron-down');

        $(e.target).prev('.panel-heading')
            .find("a")
            .toggleClass('active inactive');
    }
    $('#accordionInner').on('hidden.bs.collapse', toggleChevronInner);
    $('#accordionInner').on('shown.bs.collapse', toggleChevronInner);
    function toggleChevronMain(e) {
        console.log('hi');
        $(e.target)
            .prev('.panel-heading')
            .find("span.indicator")
            .toggleClass('glyphicon-triangle-top glyphicon-triangle-bottom');
        $(e.target).prev('.panel-heading')
            .find("a")
            .toggleClass('active inactive');
    }
    $('#accordion').on('hidden.bs.collapse', toggleChevronMain);
    $('#accordion').on('shown.bs.collapse', toggleChevronMain);

然而，我看到一个奇怪的问题。当我扩展主要的Accordion即#accordion时，函数toggleChevronInner也被调用。

为什么即使在ID不同之后这样的行为又如何解决？

您可以在http://jsbin.com/kagowi/1/edit?js,console,output看到它的实际效果。对于商品，它已经嵌套崩溃。