modifying jquery function to add scroll bar in many places...
<p>I use following jquery function to scroll contents vertically. Its working with one DIV and ID    of jp-container. So now I would like to know, How I apply this function to more DIVs with different values. At the moment I use this function twice to add a scroll bar to 2 DIVs. </p>

<pre><code>$(function() {

            // the element we want to apply the jScrollPane
            var $el = $('#jp-container').jScrollPane({
                verticalGutter  : -16
            }),

            // the extension functions and options  
                extensionPlugin     = {

                    extPluginOpts   : {
                        // speed for the fadeOut animation
                        mouseLeaveFadeSpeed : 500,
                        // scrollbar fades out after hovertimeout_t milliseconds
                        hovertimeout_t      : 1000,
                        // if set to false, the scrollbar will be shown on mouseenter and hidden on mouseleave
                        // if set to true, the same will happen, but the scrollbar will be also hidden on mouseenter after "hovertimeout_t" ms
                        // also, it will be shown when we start to scroll and hidden when stopping
                        useTimeout          : false,
                        // the extension only applies for devices with width &gt; deviceWidth
                        deviceWidth         : 980
                    },
                    hovertimeout    : null, // timeout to hide the scrollbar
                    isScrollbarHover: false,// true if the mouse is over the scrollbar
                    elementtimeout  : null, // avoids showing the scrollbar when moving from inside the element to outside, passing over the scrollbar
                    isScrolling     : false,// true if scrolling
                    addHoverFunc    : function() {

                        // run only if the window has a width bigger than deviceWidth
                        if( $(window).width() &lt;= this.extPluginOpts.deviceWidth ) return false;

                        var instance        = this;

                        // functions to show / hide the scrollbar
                        $.fn.jspmouseenter  = $.fn.show;
                        $.fn.jspmouseleave  = $.fn.fadeOut;

                        // hide the jScrollPane vertical bar
                        var $vBar           = this.getContentPane().siblings('.jspVerticalBar').hide();

                        /*
                         * mouseenter / mouseleave events on the main element
                         * also scrollstart / scrollstop - @James Padolsey : http://james.padolsey.com/javascript/special-scroll-events-for-jquery/
                         */
                        $el.bind('mouseenter.jsp',function() {

                            // show the scrollbar
                            $vBar.stop( true, true ).jspmouseenter();

                            if( !instance.extPluginOpts.useTimeout ) return false;

                            // hide the scrollbar after hovertimeout_t ms
                            clearTimeout( instance.hovertimeout );
                            instance.hovertimeout   = setTimeout(function() {
                                // if scrolling at the moment don't hide it
                                if( !instance.isScrolling )
                                    $vBar.stop( true, true ).jspmouseleave( instance.extPluginOpts.mouseLeaveFadeSpeed || 0 );
                            }, instance.extPluginOpts.hovertimeout_t );


                        }).bind('mouseleave.jsp',function() {

                            // hide the scrollbar
                            if( !instance.extPluginOpts.useTimeout )
                                $vBar.stop( true, true ).jspmouseleave( instance.extPluginOpts.mouseLeaveFadeSpeed || 0 );
                            else {
                            clearTimeout( instance.elementtimeout );
                            if( !instance.isScrolling )
                                    $vBar.stop( true, true ).jspmouseleave( instance.extPluginOpts.mouseLeaveFadeSpeed || 0 );
                            }

                        });

                        if( this.extPluginOpts.useTimeout ) {

                            $el.bind('scrollstart.jsp', function() {

                                // when scrolling show the scrollbar
                                clearTimeout( instance.hovertimeout );
                                instance.isScrolling    = true;
                                $vBar.stop( true, true ).jspmouseenter();

                            }).bind('scrollstop.jsp', function() {

                                // when stop scrolling hide the scrollbar (if not hovering it at the moment)
                                clearTimeout( instance.hovertimeout );
                                instance.isScrolling    = false;
                                instance.hovertimeout   = setTimeout(function() {
                                    if( !instance.isScrollbarHover )
                                        $vBar.stop( true, true ).jspmouseleave( instance.extPluginOpts.mouseLeaveFadeSpeed || 0 );
                                }, instance.extPluginOpts.hovertimeout_t );

                            });

                            // wrap the scrollbar
                            // we need this to be able to add the mouseenter / mouseleave events to the scrollbar
                            var $vBarWrapper    = $('&lt;div/&gt;').css({
                                position    : 'absolute',
                                left        : $vBar.css('left'),
                                top         : $vBar.css('top'),
                                right       : $vBar.css('right'),
                                bottom      : $vBar.css('bottom'),
                                width       : $vBar.width(),
                                height      : $vBar.height()
                            }).bind('mouseenter.jsp',function() {

                                clearTimeout( instance.hovertimeout );
                                clearTimeout( instance.elementtimeout );

                                instance.isScrollbarHover   = true;

                                // show the scrollbar after 100 ms.
                                // avoids showing the scrollbar when moving from inside the element to outside, passing over the scrollbar                              
                                instance.elementtimeout = setTimeout(function() {
                                    $vBar.stop( true, true ).jspmouseenter();
                                }, 100 );   

                            }).bind('mouseleave.jsp',function() {

                                // hide the scrollbar after hovertimeout_t
                                clearTimeout( instance.hovertimeout );
                                instance.isScrollbarHover   = false;
                                instance.hovertimeout = setTimeout(function() {
                                    // if scrolling at the moment don't hide it
                                    if( !instance.isScrolling )
                                        $vBar.stop( true, true ).jspmouseleave( instance.extPluginOpts.mouseLeaveFadeSpeed || 0 );
                                }, instance.extPluginOpts.hovertimeout_t );

                            });

                            $vBar.wrap( $vBarWrapper );

                        }

                    }

                },

                // the jScrollPane instance
                jspapi          = $el.data('jsp');

                // extend the jScollPane by merging 
                $.extend( true, jspapi, extensionPlugin );
                jspapi.addHoverFunc();

});
</code></pre>
