title: jQuery plugin data mixup with multiple instances
body: <p>I'm trying to develop a jQuery plugin to display adaptive image galleries. I'm using .data() to store the information for each slide of the gallery.</p>
  
  <p>Everything appears to be working okay when displaying a single gallery, but gets mixed up when trying to have multiple gallery instances on a single page. <a href="http://www1.lynn.edu/clientuploads/test/slideshow3.html" rel="nofollow">A rough demo can be viewed here</a>.</p>
  
  <p>Here is the code that is being run:</p>
  
  <pre><code>(function($) {
      $.Gallery = function(element, options) {
          this.$el = $(element);
          this._init(options);
      };
  
      $.Gallery.defaults = {
          showCarousel : true,
      };
  
      $.Gallery.prototype = {
          _init : function(options) {
              var $this = $(this);
              var instance = this;
  
              // Get settings from stored instance
              var settings = $this.data('settings');
              var slides = $this.data('slides');
  
              // Create or update the settings of the current gallery instance
              if (typeof(settings) == 'undefined') {
                  settings = $.extend(true, {}, $.Gallery.defaults, options);
              }
              else {
                  settings = $.extend(true, {}, settings, options);
              }
              $this.data('settings', settings);
  
              if (typeof(slides) === 'undefined') {
                  slides = [];
              }
              $this.data('slides', slides);
  
              instance.updateCarousel();
          },
  
          addItems : function(newItems) {
              var $this = $(this),
                  slides = $this.data('slides');
  
              for (var i=0; i&lt;newItems.length; i++) {
                  slides.push(newItems[i]);
              };
          },
  
          updateCarousel : function() {
              var instance = this,
                  $this = $(this);
                  slides = $(instance).data('slides');
  
              var gallery = instance.$el.attr('id');
  
              /* Create carousel if it doesn't exist */
              if (instance.$el.children('.carousel').length == 0) {
                  $('&lt;div class="carousel"&gt;&lt;ul&gt;&lt;/ul&gt;&lt;/div&gt;').appendTo(instance.$el);
                  var image = instance.$el.find('img');
              };
  
              var carouselList = instance.$el.find('.carousel &gt; ul'),
                  slideCount = slides.length,
                  displayCount = carouselList.find('li').length;
  
  
              if (displayCount &lt; slideCount) {
                  for (var i=displayCount; i&lt;slides.length; i++) {                    
                      slides[i].id = gallery + '-slide-' + i;
                      slide = $('&lt;img&gt;').attr({src : slides[i].thumb}).appendTo(carouselList).wrap(function() {
                          return '&lt;li id="' + slides[i].id + '" /&gt;'
                      });
  
                      slide.on({
                          click : function() {
                              instance.slideTo($(this).parent().attr('id'));
                          },
                      });
                  };
              };
          },
  
          slideTo : function(slideID) {
              var $this = $(this);
              var slides = $this.data('slides');
              var image;
              var $instance = $(this.$el);
  
              $(slides).each( function() {
                  if (this.id == slideID){
                      image = this.img;
                  };
              });
  
              $('&lt;img/&gt;').load( function() {
                  $instance.find('div.image').empty().append('&lt;img src="' + image + '"/&gt;');
              }).attr( 'src', image );
          },
      };
  
      $.fn.gallery = function(options) {
  
          args = Array.prototype.slice.call(arguments, 1);
  
          this.each(function() {
              var instance = $(this).data('gallery');
  
              if (typeof(options) === 'string') {
                  if (!instance) {
                      console.error('Methods cannot be called until jquery.responsiveGallery has been initialized.');
                  }
                  else if (!$.isFunction(instance[options])) {
                      console.error('The method "' + options + '" does not exist in jquery.responsiveGallery.');
                  }
                  else {
                      instance[options].apply(instance, args);
                  }
              }
              else {
                   if (!instance) {
                      $(this).data('gallery', new $.Gallery(this, options));
                  }
              }
          });
          return this;
      };
  
  })(jQuery);
  
  $(window).load(function() {
      $('#gallery2').gallery();
      $('#gallery3').gallery();
  
      $('#gallery2').gallery('addItems', [
          {
              img: 'images/image2.jpg',
              thumb: 'images/image2_thumb.jpg',
              desc: 'Image of number 2'
          },
          {
              img: 'images/image3.jpg',
              thumb: 'images/image3_thumb.jpg',
              desc: 'Image of number 3'
          },
          {
              img: 'images/image4.jpg',
              thumb: 'images/image4_thumb.jpg',
              desc: 'Image of number 4'
          },
          {
              img: 'images/image5.jpg',
              thumb: 'images/image5_thumb.jpg',
              desc: 'Image of number 5'
          }
      ]);
  
      $('.pGallery').gallery('addItems', [
          {
              img: 'images/2.jpg',
              thumb: 'images/2_thumb.jpg',
              desc: 'Image of number 0'
          },
          {
              img: 'images/image1.jpg',
              thumb: 'images/image1_thumb.jpg',
              desc: 'The second image'
          }
      ]);
      $('.pGallery').gallery('updateCarousel');
  });
  </code></pre>
  
  <p>On the surface it appears to create two galleries with the proper slide structure of:</p>
  
  <ul>
  <li>gallery2
  <ul>
  <li>gallery2-slide-0</li>
  <li>gallery2-slide-1</li>
  <li>gallery2-slide-2</li>
  <li>gallery2-slide-3</li>
  <li>gallery2-slide-4</li>
  <li>gallery2-slide-5</li>
  </ul></li>
  <li>gallery3
  <ul>
  <li>gallery3-slide-0</li>
  <li>gallery3-slide-1</li>
  </ul></li>
  </ul>
  
  <p>However, the onclick action doesn't work for the last two slides of Gallery2 (the slides duplicated in both galleries). Upon closer inspection of the DOM, I can see that the slides stored in data for gallery2, have the following ids:</p>
  
  <ul>
  <li>gallery2
  <ul>
  <li>gallery2-slide-0</li>
  <li>gallery2-slide-1</li>
  <li>gallery2-slide-2</li>
  <li>gallery2-slide-3</li>
  <li>gallery3-slide-0</li>
  <li>gallery3-slide-1</li>
  </ul></li>
  </ul>
  
  <p>I'm not sure what is causing the mix-up or how to fix, so any help would be greatly appreciated.
  Thanks</p>