A plugin I'm writing that will have essentially be a tabbed popup. However, I feel like the method I use to remove tabs is completely unwieldy.    (function($) {        var methods = {            init: function(option) {       this.data(tabs, {});       this.data(currentTab, {});       methods.setupPopup(this);       return this;      }      setupPopup: function (popup) {          tabs = popup.find(.popupTabs .tab);         tabs.each(function(i, tab){        $name = $(tab).data(tabTarget);        popup.data(tabs)[$name] = {         tabSelector : $(tab).get(0),         tab : $(popup).find([data-tab-name=' + $(tab).data(tabTarget) + ']).get(0)        }        $(tab).zIndex( tabs.length - i)       })       popup.data(currentTab, popup.data(tabs)[Object.keys(popup.data(tabs))[0]])          popup.on( 'click',.tab, function(){         targetTab = popup.data(tabs)[$(this).data(tabTarget)]          $(popup.data(currentTab).tab).removeClass('active');         $(popup.data(currentTab).tabSelector).removeClass('active');       $(targetTab.tabSelector).addClass(active);         $(targetTab.tab).addClass(active);            popup.data(currentTab, targetTab)             })       methods.setupTabs(popup, popup.find(.popupTab))      },        setupTabs : function (popup, tabs){       tabs.each(function(i, tab) {        btns = $(tab).find('.popupBtn');        btns.each(function(i, btn) {         $(btn).on(click, function(){          methods.removeTab(popup, tab);         });        });       });          },      removeTab : function (popup, tab){       $(popup.data(currentTab).tab).remove();       $(popup.data(currentTab).tabSelector).remove();       delete popup.data(tabs)[Object.keys(popup.data(tabs))[0]]       popup.data(currentTab, popup.data(tabs)[Object.keys(popup.data(tabs))[0]])       $(popup.data(currentTab).tab).addClass(active);       $(popup.data(currentTab).tabSelector).addClass(active);      }        }        $.fn.PopupTabs = function(method) {          if (methods[method]) {               return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));           } else if (typeof method === 'object' || !method) {               return methods.init.apply(this, arguments);           } else {                $.error('Method ' + method + ' does not exist on jQuery.Test');            }        };    })(jQuery);    <div class=popupWrapper>     <div class=popupTabs>      <div class=tab active data-tab-target=foo></div>      <div class=tab data-tab-target=bar></div>     </div>     <div class=popupBody >      <div class=popupTab active data-tab-name=foo>       <div class=tabBody>        <p>This is my content for my first tab</p>       </div>       <div class=tabButtons>        <div class=popupButton btnDefault>Click to close</div>       </div>      </div>      <div class=popupTab data-tab-name=bar>       <div class=tabBody>        <p>this is my content for my second tab</p>       </div>       <div class=tabButtons>        <div class=popupButton btnDefault>Click to close</div>       </div>      </div>         </div>    </div>As you can see, I added the tabs to an object structure so I could call them by name and get both the tab as well as the associated tabBody to act on (i.e. make active, remove, etc.) yet this structure is somewhat hard to work with, especially when I want to remove a tab and automatically call on the next one to make it active.
Tabbed popup jQuery plugin
javascript;jquery;plugin