Can't get multiple close buttons to work

[zagabona]

Hello,

I'm having a little trouble with using two "close" links of Sidr. I have three menu's:

• A main menu for desktop, which consists of three links + one link that triggers an extra submenu (Sidr).
• That extra (Sidr) submenu, which contains a "close" link, and works perfectly fine.
• A second, responsive, Sidr menu which consists of the main menu and the extra submenu combined, with another close link, different from the one in the extra menu mentionned above (of which the close link is still in there, but hidden by CSS).

I'm using this js for Sidr:

    // SIDR

    $('#startklapper').sidr({
        name: 'klapper',
        side: 'right'
    });

    $('#stopklapper').click(function () {
        $.sidr('close', 'klapper');
    });

    // RESPONSIVE SIDR

    $('#startresponsiveklapper').sidr({
        name: 'responsiveklapper',
        side: 'right'
    });

    $('#stopresponsiveklapper').click(function () {
        $.sidr('close', 'responsiveklapper');
    });

Sidr opens the menu both in the desktop/tablet as the mobile view, however, the "close" button in the responsive view isn't working.

But, when I remove the original main menu altogether and let's say that only the responsive menu remains, then the troublesome close link doés work.

What could be causing this issue please (there are no errors in the console)?

P.S.: I'm using a quite drastic solution now, excluding the main menu from mobile device with PHP (using Mobile Detect):

<?php if( $detect->isMobile() && !$detect->isTablet() ): ?>
      <!-- nothing on phone -->
<?php else: ?>
      Main menu <!-- only on desktop and tablet -->
<?php endif; ?>

It does the job but it doesn't feel like the right approach.