JSFiddle - React, Tailwind, and code Playground

HTML

<div id="page" class="">
	<section id="SectionHead" class="row side-left gutter pad-top">
		<div style="" class="column one " id="MainContent">
			<img data-mh="HeaderImages" id="ProfilePicture" src="../images/default.jpg"/>
			<div id="ProfileDiv">
				<div>
					<div id="Info" class="ProfileInfoBox">
						<h2 class="SectionTitle" id="ProfileName"><span id="Name"></span></h2>
						<div id="Title"></div>
						<div id="Department"></div>
					</div>
					<div id="ContactInfoBox" class="ProfileInfoBox">
						<h3 class= "SectionTitle">Contact</h3>
						<div id="PhoneNumber">Phone Number</div>
						<div id="Office">Office</div>
						<div id="Email">Email</div>
					</div>
					<div id="EducationInfoBox" class="ProfileInfoBox">
						<h3 class="SectionTitle">Education</h3>
						<div id="Education"><ul></ul></div>
					</div>
				</div>
			</div>
		</div>
		<div style="" class="column two ">
			<div id="ActionShot_Div">
				<img data-mh="HeaderImages" id="ActionShot_Banner" src="../images/ActionShotBanner4.jpg"/>
				<h2 class = "BioPageh2"><span id="BioPageTitle"></span></h2>
			</div>
			<div id="ContentDiv">
				<div id="ToolBar">
					<ul class="tab">
						<li class="BioCheck"><a href="javascript:void(0)" class="active tablinks" id="defaultOpen" onclick="openTab(event, 'Bio')">Biography</a></li>
						<li class="InterestCheck"><a href="javascript:void(0)" class="tablinks" onclick="openTab(event, 'Interests')">Academic Interests</a></li>
						<li class="ICCheck"><a href="javascript:void(0)" class="tablinks" onclick="openTab(event, 'IntellectualContributions')">Publications</a></li>
					</ul>
				</div>
			<div id="Bio" class="tabcontent BioCheck ">
				<div id="Vita"></div>
				<div id="InnerBio" class=""></div>
			</div>
			<div id="Interests" class="tabcontent">
				<div id ="ResearchDiv" class="ResearchInterestCheck">
					<h3 class="SectionTitle TopTitle">Research Interests</h3>
					<div id="ResearchInterests"...

JavaScript

$(window).load(function () {
    var querystring = window.location.search;
    var username = querystring.substring(1, querystring.length).split("=")[1];
    username = username.indexOf("@") == -1 ? username : username.split("@")[0];
    $.ajax({
    	type: 'GET',
    	url: 'MYurl',
    	data: { id: username},
    	datatype: "json",
    	success: function(response){
    		if (response.Error){
    			alert(response.ErrorMessage);
    		}else{
    			if(response.Profile.length == 0){
    				//No Data in Report
    			}else{
    				/*Variable Declaration*/
    				var BioField = (response.Profile.Biography);
    				var EducationField = (response.Profile.Education);
    				var ICField = (response.Profile.IntellectualContributions);
    				var ResearchInterests = (response.Profile.Research);
    				var TeachingInterests = (response.Profile.Teaching);

    				if (BioField != ""){
    					$('.BioCheck').removeClass('BioCheck');
    				}
    				if (EducationField != ""){
    					$('.EducationCheck').removeClass('EducationCheck');
    				}
    				if (ICField != ""){
    					$('.ICCheck').removeClass('ICCheck');
    				}

    				if ((ResearchInterests != "") || (TeachingInterests != "")){
    					$('.InterestCheck').removeClass('InterestCheck');
    				}else{
    					//
    				}
    				if (ResearchInterests != ""){
    					$('.ResearchInterestCheck').removeClass('ResearchInterestCheck');
    				}

    				if (TeachingInterests != ""){
    					$('.TeachingInterestCheck').removeClass('TeachingInterestCheck');
    				}

    				/*NAME RETRIEVAL*/
    				var FirstName = (response.Profile.FirstName);
    				var LastName = (response.Profile.LastName);
    				var PreferredName = (response.Profile.PreferredName);
    				if((PreferredName == "") || (PreferredName == null)){
    					//This is where we replace the empty Name Spot in the Code with Pulled Usernames' Name
    					$("#Name").text(FirstName + " " + LastName);
   ...