Примените тот же JavaScript на несколько прокрутки div

Question

Я нашел этот простой горизонтальный свиток:

http://jsfiddle.net/Lpjj3n1e/

Работает нормально, но если я дублирую горизонтальную прокрутку, хорошо работает только первая прокрутка.

Что я могу сделать для JavaScript, который будет применен к 2, 3 или любому другому числу сгенерированных свитков?

$(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();
   });
 });