<script type="text/javascript">
    $(function () {
        var $containerOuter = $('.js-container-outer');
        var $containerOuterTable = $('.js-container-outer').find('table');
        var $rightEndScroll = 'right-end-scroll';
        var $leftEndScroll = 'left-end-scroll';
        $containerOuter.scroll( function() {
            if ( $(this).scrollLeft() === ($containerOuterTable.width() - $(this).width())) {
                $(this).parent().addClass($rightEndScroll);
                $(this).parent().removeClass($leftEndScroll);
            }
            if ( $(this).scrollLeft() === 0) {
                $(this).parent().addClass($leftEndScroll);
                $(this).parent().removeClass($rightEndScroll);
            }
        });

        var horScrollFunc = function (parentClass) {
            var $buttonRight = $('.js-slide-right', parentClass);
            var $buttonLeft = $('.js-slide-left', parentClass);
            var $containerOuter = $('.js-container-outer', parentClass);
            $buttonRight.on('click', function() {
                $containerOuter.animate( { scrollLeft: '+=300' }, 250);
            });
            $buttonLeft.on('click', function() {
                $containerOuter.animate( { scrollLeft: '-=300' }, 250);
            });
        }
        horScrollFunc('.js-add-cart-form');
        horScrollFunc('.js-bp-order-form');
    });
</script>