JSFiddle - React, Tailwind, and code Playground

by whirly1227

HTML

<button id="ADC" href="#usertype" class="button" onClick="FillUserTypes('ADC');" >Site1</button>
<button id="ADC" href="#usertype" class="button" onClick="FillUserTypes('ADC');" >Site2</button>
<br><br>
<button id="designer" class="button" onClick="userTypeClick('Designer');">userType1</button>
<button id="designer" class="button" onClick="userTypeClick('Designer');">userType2</button>
<br><br>
<button href="#topic" class="button" onClick="cadORcam('CAD');">CAD</button>
<button href="#topic" class="button" onClick="cadORcam('CAD');">CAM</button>

CSS

.actSite {
	background-color: #444;
}
.actUT {
	background-color: #444;
}
.actCadCam {
	background-color: #444;
}

JavaScript

function FillUserTypes(actSite){
	// Show correct User Types for Active Site
	if (actSite == "ADC"){
		$('#UTlist').load('content/usertypes.php #adc');
	}else {
		$('#UTlist').load('content/usertypes.php #other');
	}
	//highlight button
	$(document).on('click', 'button', (function(){
		$('button').removeClass('actSite');
		$(this).addClass('actSite');
	}));
	
	localStorage.setItem("actSite", actSite);
};
function userTypeClick(actUT){
	// Store User Type and show Main Topic
	localStorage.setItem("actUT", actUT);
	$('#CadCam').load('content/cadcam.php');
	$(document).on('click', 'button', (function(){
		$('button.actUT').removeClass('actUT');
		$(this).addClass('actUT');
	}));
};
function cadORcam(cadcam){
	// Store Cad or Cam and show Main Topic
	localStorage.setItem("cadcam", cadcam);
	var actSite = localStorage.getItem("actSite");
	var actUT = localStorage.getItem("actUT");
	var cadcam = localStorage.getItem("cadcam");
	$('#maintopic').load('content/maintopic.php #' + actSite + '-' + actUT + '-' + cadcam);
	$(document).on('click', 'button', (function(){
		$('button').removeClass('actCadCam');
		$(this).addClass('actCadCam');
	}));
};