JSFiddle - React, Tailwind, and code Playground

HTML

<form>
	<table>
		<tr>
			<td>Please choose your Favorite Pet:<br />
			<input name="cat" onclick="SetCookie('animal', this.name, exp);" type="checkbox" />Cat<br />
			<input name="dog" onclick="SetCookie('animal', this.name, exp);" type="checkbox" />Dog<br />
			<input name="gerbil" onclick="SetCookie('animal', this.name, exp);" type="checkbox" />Gerbil<br />
			<input name="gopher" onclick="SetCookie('animal', this.name, exp);" type="checkbox" />Gopher<br />
			</td>
		</tr>
	</table>
</form>

<p>&nbsp;</p>
<p>&nbsp;</p>
<ul>
	<li id="one"  >1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
	<li>6</li>
</ul>

CSS

.favRed{
	color:red;
}
.favBlue{
	color:blue;
}
.favYellow{
	color:yellow;
}
.favWhite{
	color:white;
}

JavaScript

var expDays = 30;
var exp = new Date();
exp.setTime(exp.getTime() + (expDays*24*60*60*1000));

function getCookieVal (offset) {
    var endstr = document.cookie.indexOf (";", offset);
    if (endstr == -1)
    endstr = document.cookie.length;
    return unescape(document.cookie.substring(offset, endstr));
    }
function GetCookie (name) {
    var arg = name + "=";
    var alen = arg.length;
    var clen = document.cookie.length;
    var i = 0;
    while (i < clen) {
        var j = i + alen;
        if (document.cookie.substring(i, j) == arg)
        return getCookieVal (j);
        i = document.cookie.indexOf(" ", i) + 1;
        if (i == 0) break;
            }
    return null;
    }
function SetCookie (name, value, exp) {
    var argv = SetCookie.arguments;
    var argc = SetCookie.arguments.length;
    var expires = (argc > 2) ? argv[2] : null;
    var path = (argc > 3) ? argv[3] : null;
    var domain = (argc > 4) ? argv[4] : null;
    var secure = (argc > 5) ? argv[5] : false;
    document.cookie = name + "=" + escape (value) +
    ((expires === null) ? "" : ("; expires=" + expires.toGMTString())) +
    ((path === null) ? "" : ("; path=" + path)) +
    ((domain === null) ? "" : ("; domain=" + domain)) +
    ((secure === true) ? "; secure" : "");
    }
function DeleteCookie (name) {
    var exp = new Date();
    exp.setTime (exp.getTime() - 1);
    var cval = GetCookie (name);
    document.cookie = name + "=" + cval + "; expires=" + exp.toGMTString();
    }

function myFunction() {
    document.getElementById("one").className = "favBlue";
}

var favorite = GetCookie('animal');

if (favorite !== null) {
    switch (favorite) {
        case 'cat' : 
        document.getElementById("one").className = "favBlue";
        	     	break;
        case 'dog' : 	document.getElementsByName('dog').className = 'favBlue'; 
        	     	break;
        case 'gerbil' : document.getElementsByName('gerbil').className = 'favYellow'; 
        		break;
        case 'gopher' :...