jQuery(document).ready(function($){
	$(".tab-group").each(function(){
		let tabgroup = $(this).attr("id"),
			tablist = "";
		$(this).children("*").each(function(){
			let tab = $(this).attr("data-tab");
			if (typeof tab !== 'undefined' && tab !== false) {
				let tabID = tab.replace(/\W+/g,"-").toLowerCase();
				$(this).wrap(`<div id="tab-panel-${tabgroup + "-" +  tabID }" ${(tablist == "" ? "class='open'" : "")} role="tabpanel" tabindex="0" aria-labeledby="tab-${tabgroup + "-" + tabID }"></div>`);
				tablist += `<li tabindex="0" role="tab" ${(tablist == "" ? "class='selected'" : "")} id="tab-${tabgroup + "-" +  tab.replace(/\W+/g,"-").toLowerCase()}"><span>${tab}</span></li>`;
			} else {
				$(this).addClass("tab-hidden");
			}
			
		})
		$(this).prepend(`<ul role="tablist">${tablist}<li role="separator" class="separator"></li></ul>`);
	})
	$('[role="tab"]').on("click", function(){
		$(this).parent().children('[role="tab"]').removeClass("selected");
		$(this).addClass("selected");
		$(this).parent().parent().children('[role="tabpanel"]').removeClass("open");
		$("#" + $(this).attr("id").replace("tab", "tab-panel")).addClass("open");
	})
})