javascript - Separation of instances of Plugin from same Class -

i have created jquery plugin allows slider functionality created targeting specific class. in scenario if created 2 separate classes , 2 separate calls, separation works fine.

problem: possible have 1 class multiple instances , separating them out? currently, if select image thumbnail or use prev , next function, changes on both instances.

jsfiddle: http://jsfiddle.net/jagmitg/xcjeg06g/

(function ($) {      $.fn.thumbnailslider = function (options) {            var defaults = {              thumbnailactivation: false,              callback: function () {}          };            var _se = $.extend(defaults, options);            var $el = this,              thumbnailhandler = $el.find('.product-gallery-super'),              targetimg = $el.find('.main-image'),              superzoomparam = thumbnailhandler.find('.active-thumbnail').data('image-index'),                navigate = function (direction) {                  current = thumbnailhandler.find('.active-thumbnail');                  nextprevious = findnextpreviousactive(direction);                  current.removeclass('active-thumbnail');                  nextprevious.addclass('active-thumbnail');                  targetimg.attr('src', nextprevious.data('image'));                  enabledisablebuttons();              },                findnextpreviousactive = function (direction) {                  if (direction == 'next') {                      previousnext = thumbnailhandler.find('.active-thumbnail').nextall().not('.comingsoon').first();                  } else {                      previousnext = thumbnailhandler.find('.active-thumbnail').prevall().not('.comingsoon').first();                  }                  return previousnext;              },                enabledisablebuttons = function () {                  if (findnextpreviousactive('next').length === 0) {                      $el.find('.super-next').addclass('disabled').prop('disabled', true);                  } else {                      $el.find('.super-next').removeclass('disabled').removeprop('disabled');                  }                  if (findnextpreviousactive('prev').length === 0) {                      $el.find('.super-prev').addclass('disabled').prop('disabled', true);                  } else {                      $el.find('.super-prev').removeclass('disabled').removeprop('disabled');                  }              },                thumbnailactivator = function () {                  if (superzoomparam !== '') {                      thumbnailhandler.children().removeclass("active-thumbnail");                      thumbnailhandler.children().each(function (index, value) {                          if (superzoomparam === index) {                              $(this).addclass('active-thumbnail');                              targetimg.attr('src', thumbnailhandler.find('.active-thumbnail').data('image'));                              //newlookimp.resizebinder();                              enabledisablebuttons();                          }                      });                  }              },                clickactivator = function () {                  thumbnailhandler.children().on('click', function (e) {                      e.preventdefault(e);                      var zoomimg = $(this).attr('data-zoom-image');                      var prodimg = $(this).attr('data-image');                      var imgsrc = $(this).children().attr('src');                      if (imgsrc != '/images/imagecomingsoon_en.jpg') {                          $(this).addclass("active-thumbnail").siblings().removeclass("active-thumbnail");                          targetimg.attr('src', prodimg);                          targetimg.attr('data-zoom-image', zoomimg);                          //newlookimp.resizebinder();                      } else {                          console.log(prod.children());                          prod.addclass('comingsoon');                      }                      enabledisablebuttons();                  });              },                init = function () {                  (i = 0; < $el.size(); i++) {                        _se.callback();                        if (_se.thumbnailactivation) {                          _se.thumbnailactivator();                      }                        clickactivator();                        $el.find('.super-prev').click(function () {                          navigate("prev");                          return false;                      });                        $el.find('.super-next').click(function () {                          navigate("next");                          return false;                      });                    }              };            init();          return $el;      }  })(jquery);    $('.mainelement').thumbnailslider();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>    <div class="mainelement">    <div class="super-image-thumb">      <div class="product-gallery-super">        <a href="#" class="product-zoom-gallery active-thumbnail" data-update="" data-image="http://dummyimage.com/50x100/000/fff.png&text=1" data-zoom-image="http://dummyimage.com/200x200/000/fff.png&text=1" data-image-index="0">          <img src="http://dummyimage.com/50x100/000/fff.png&text=1" onerror="comingsoonthumb(this);this.parentnode.classname = 'product-zoom-gallery comingsoon';" />        </a>        <a href="#" class="product-zoom-gallery" data-image="http://dummyimage.com/200x200/000/fff.png&text=2" data-zoom-image="http://dummyimage.com/200x200/000/fff.png&text=2" data-image-index="1">          <img src="http://dummyimage.com/50x100/000/fff.png&text=2" onerror="comingsoonthumb(this);this.parentnode.classname = 'product-zoom-gallery comingsoon';" />        </a>        <a href="#" class="product-zoom-gallery" data-image="http://dummyimage.com/200x200/000/fff.png&text=3" data-zoom-image="http://dummyimage.com/200x200/000/fff.png&text=3" data-image-index="2">          <img src="http://dummyimage.com/50x100/000/fff.png&text=3" onerror="comingsoonthumb(this);this.parentnode.classname = 'product-zoom-gallery comingsoon';" />        </a>        <a href="#" class="product-zoom-gallery" data-image="http://dummyimage.com/200x200/000/fff.png&text=4" data-zoom-image="http://dummyimage.com/200x200/000/fff.png&text=4" data-image-index="3">          <img src="http://dummyimage.com/50x100/000/fff.png&text=4" onerror="comingsoonthumb(this);this.parentnode.classname = 'product-zoom-gallery comingsoon';" />        </a>        <a href="#" class="product-zoom-gallery" data-image="http://dummyimage.com/200x200/000/fff.png&text=5" data-zoom-image="http://dummyimage.com/200x200/000/fff.png&text=5" data-image-index="4">          <img src="http://dummyimage.com/50x100/000/fff.png&text=5" onerror="comingsoonthumb(this);this.parentnode.classname = 'product-zoom-gallery comingsoon';" />        </a>        <a href="#" class="product-zoom-gallery" data-image="http://dummyimage.com/200x200/000/fff.png&text=6" data-zoom-image="http://dummyimage.com/200x200/000/fff.png&text=6" data-image-index="5">          <img src="http://dummyimage.com/50x100/000/fff.png&text=6" onerror="comingsoonthumb(this);this.parentnode.classname = 'product-zoom-gallery comingsoon';" />        </a>      </div>    </div>    <div class="main-image-container">      <img class="main-image image-resize" src="http://dummyimage.com/200x200/000/fff.png&text=1" data-zoom-image="http://dummyimage.com/200x200/000/fff.png&text=1" onerror="comingsoonmain(this)" />      <button name="prev" class="super-prev" class="disabled">prev</button>      <button name="next" class="super-next">next</button>    </div>  </div>    <div class="mainelement">    <div class="super-image-thumb">      <div class="product-gallery-super">        <a href="#" class="product-zoom-gallery active-thumbnail" data-update="" data-image="http://dummyimage.com/50x100/000/fff.png&text=1" data-zoom-image="http://dummyimage.com/200x200/000/fff.png&text=1" data-image-index="0">          <img src="http://dummyimage.com/50x100/000/fff.png&text=1" onerror="comingsoonthumb(this);this.parentnode.classname = 'product-zoom-gallery comingsoon';" />        </a>        <a href="#" class="product-zoom-gallery" data-image="http://dummyimage.com/200x200/000/fff.png&text=2" data-zoom-image="http://dummyimage.com/200x200/000/fff.png&text=2" data-image-index="1">          <img src="http://dummyimage.com/50x100/000/fff.png&text=2" onerror="comingsoonthumb(this);this.parentnode.classname = 'product-zoom-gallery comingsoon';" />        </a>        <a href="#" class="product-zoom-gallery" data-image="http://dummyimage.com/200x200/000/fff.png&text=3" data-zoom-image="http://dummyimage.com/200x200/000/fff.png&text=3" data-image-index="2">          <img src="http://dummyimage.com/50x100/000/fff.png&text=3" onerror="comingsoonthumb(this);this.parentnode.classname = 'product-zoom-gallery comingsoon';" />        </a>        <a href="#" class="product-zoom-gallery" data-image="http://dummyimage.com/200x200/000/fff.png&text=4" data-zoom-image="http://dummyimage.com/200x200/000/fff.png&text=4" data-image-index="3">          <img src="http://dummyimage.com/50x100/000/fff.png&text=4" onerror="comingsoonthumb(this);this.parentnode.classname = 'product-zoom-gallery comingsoon';" />        </a>        <a href="#" class="product-zoom-gallery" data-image="http://dummyimage.com/200x200/000/fff.png&text=5" data-zoom-image="http://dummyimage.com/200x200/000/fff.png&text=5" data-image-index="4">          <img src="http://dummyimage.com/50x100/000/fff.png&text=5" onerror="comingsoonthumb(this);this.parentnode.classname = 'product-zoom-gallery comingsoon';" />        </a>        <a href="#" class="product-zoom-gallery" data-image="http://dummyimage.com/200x200/000/fff.png&text=6" data-zoom-image="http://dummyimage.com/200x200/000/fff.png&text=6" data-image-index="5">          <img src="http://dummyimage.com/50x100/000/fff.png&text=6" onerror="comingsoonthumb(this);this.parentnode.classname = 'product-zoom-gallery comingsoon';" />        </a>      </div>    </div>    <div class="main-image-container">      <img class="main-image image-resize" src="http://dummyimage.com/200x200/000/fff.png&text=1" data-zoom-image="http://dummyimage.com/200x200/000/fff.png&text=1" onerror="comingsoonmain(this)" />      <button name="prev" class="super-prev" class="disabled">prev</button>      <button name="next" class="super-next">next</button>    </div>  </div>