I tried to make a small tab plugin and used code from some learning site I don't remember. Problem: when I initialize plugin 2 times on a page it works at both places same time. Here's a pen with a complete case: https://codepen.io/leshiq/pen/XWJjmxy
Here's plugin's code:
(function($){
jQuery.fn.lightTabs = function(options){
var createTabs = function(){
tabs = this;
i = 0;
if ($(tabs).children().first().children().length < 2) {
tabs_list = $(tabs).children().first().children().children();
} else {
tabs_list = $(tabs).children().first().children();
}
console.log(tabs_list);
showPage = function(i){
$(tabs).children().last().children().hide();
$(tabs).children().last().children().eq(i).show();
tabs_list.removeClass("active");
tabs_list.eq(i).addClass("active");
}
showPage(0);
console.log($(tabs).children().last().children());
tabs_list.each(function(index, element){
$(element).attr("data-page", i);
i++;
});
tabs_list.click(function(){
showPage(parseInt($(this).attr("data-page")));
});
};
return this.each(createTabs);
};
})(jQuery);