Multiple dynamic JCarousels on window and onclick scroll is not working

Question

I have a page with 2 carousels, each invoked with a unique ID. The carousels work fine. I have a div on the page that i want to click and have the first carousel, #first, scroll using the scroll method. When i have one carousel on the page the scroll method, bedRoomClick, works fine.
When I add the second carousel, #second, the scroll method in bedRoomClick() no longer works. I receive the error, Uncaught TypeError: jQuery(...).data(...).scroll is not a function.

If I delete the second carousel everything works fine (no error and scrolling works). Any thoughts/suggestions?

How i created my carousel

    jQuery('#first').jcarousel({
     wrap: 'circular',
     visible: 3
});
jQuery('#second').jcarousel({
    wrap: 'circular',
    rtl:rtl,
    visible: 4
});

The script with the scroll method

    <script>
    function bedRoomClick() {
       var instance =  jQuery('#first').data('jcarousel');
       jQuery('#first').data('jcarousel').scroll('+=2');
    }
</script>

The div clicked

<div class="banner" onclick="bedRoomClick();"></div>