将相同的JavaScript应用于多个div滚动

Question

我发现了这个简单的水平滚动：

http://jsfiddle.net/Lpjj3n1e/

它工作正常，但是如果我复制水平滚动条，则只有第一个滚动条运行良好。

我如何处理要应用于2、3或任意数量的生成滚动的JavaScript？

$(function() {
   var print = function(msg) {
     alert(msg);
   };

   var setInvisible = function(elem) {
     elem.css('visibility', 'hidden');
   };
   var setVisible = function(elem) {
     elem.css('visibility', 'visible');
   };

   var elem = $("#elem");
   var items = elem.children();

   // Inserting Buttons
   elem.prepend('<div id="right-button" style="visibility: hidden;"><a href="#"><</a></div>');
   elem.append('  <div id="left-button"><a href="#">></a></div>');

   // Inserting Inner
   items.wrapAll('<div id="inner" />');

   // Inserting Outer
   debugger;
   elem.find('#inner').wrap('<div id="outer"/>');

   var outer = $('#outer');

   var updateUI = function() {
     var maxWidth = outer.outerWidth(true);
     var actualWidth = 0;
     $.each($('#inner >'), function(i, item) {
       actualWidth += $(item).outerWidth(true);
     });

     if (actualWidth <= maxWidth) {
       setVisible($('#left-button'));
     }
   };
   updateUI();



   $('#right-button').click(function() {
     var leftPos = outer.scrollLeft();
     outer.animate({
       scrollLeft: leftPos - 200
     }, 800, function() {
       debugger;
       if ($('#outer').scrollLeft() <= 0) {
         setInvisible($('#right-button'));
       }
     });
   });

   $('#left-button').click(function() {
     setVisible($('#right-button'));
     var leftPos = outer.scrollLeft();
     outer.animate({
       scrollLeft: leftPos + 200
     }, 800);
   });

   $(window).resize(function() {
     updateUI();
   });
 });