JSFiddle - React, Tailwind, and code Playground

HTML

<script type="text/javascript" language="JavaScript">
        var today = new Date();
        var expires = new Date(today.getTime() + (56 * 86400000));

        var searchString = replace(self.location.search.substring(1),"+"," ");
        if (searchString.length > 0) Set_Cookie("userProfile",searchString,expires);
        var userProfile = Get_Cookie("userProfile");

        if (!userProfile) {
               document.write('<P>Welcome,<P>According to your records ');
            document.write('you have not saved a form yet:');
        }
        else {
            document.write('<P>Welcome back,<P>According to your records ');
            document.write('the following form answers are held in your profile:');
        }
    </script>
    
    <p>Your Details (* = required)</p>

    <!-- Licensed software, from www.freecontactform.com -->
    <form name="profileForm">
    <table class="widthOneHundredPercent">
    <tr>
    <td class="tableCellFloat widthFortyPercent" valign="top">
    <label for="First_name" class="required">First name<span class="required_star"> * </span></label>
    </td>
    <td class="tableCellFloat" valign="top">
    <input type="text" name="First_name" id="First_name" maxlength="50" value="" placeholder="First name"/>
    </td>
    </tr>
    <tr>
    <td class="tableCellFloat widthFortyPercent" valign="top">
    <label for="Last_name" class="required">Last name<span class="required_star"> * </span></label>
    </td>
    <td class="tableCellFloat" valign="top">
    <input type="text" name="Last_name" id="Last_name" maxlength="50" value="" placeholder="Last name"/>
    </td>
    </tr>
    <tr>
    <td class="tableCellFloat columnOne" valign="top">
    <label for="Gender">Gender</label></td>
    </td>
    <td class="tableCellFloat columnTwo" valign="top">
    <input type="radio" name="Gender" value="Male" />Male<br />
    <input type="radio" name="Gender" value="Female" />Female<br />
    </td>
    </tr>
    <tr>
    <td...

JavaScript

function Get_Cookie(name) {
    var start = document.cookie.indexOf(name+"=");
    var len = start+name.length+1;
    if ((!start) && (name != document.cookie.substring(0,name.length))) return null;
    if (start == -1) return null; 
    var end = document.cookie.indexOf(";",len);
    if (end == -1) end = document.cookie.length;
    return unescape(document.cookie.substring(len,end));
}

function Set_Cookie(name,value,expires,path,domain,secure) {
    document.cookie = name + "=" + escape(value) +
        ( (expires)    ? ";expires=" + expires.toGMTString() : "") +
        ( (path)    ? ";path=" + path : "") + 
        ( (domain)    ? ";domain=" + domain : "") +
        ( (secure)     ? ";secure" : "");
}

function setupForm() {
    if (userProfile) getValues(userProfile);
}

    function getValues(string) {
        
        getValue(string,"First_name",document.profileForm.First_name,"text");
        
        getValue(string,"Last_name",document.profileForm.Last_name,"text");
        
        getValue(string,"Gender",document.profileForm.Gender,"radio");
    
        getValue(string,"How_do_we_contact_you?",document.profileForm.How_do_we_contact_you,"select");
    
        getValue(string,"Preferred_time_of_contact?",document.profileForm.Preferred_time_of_contact,"select");
        
        getValue(string,"Job_title",document.profileForm.Job_title,"text");
}

function replace(string,text,by) {
// Replaces text with by in string
    var i = string.indexOf(text);
    var newstr = '';
    if ((!i) || (i == -1)) return string;
    newstr += string.substring(0,i) + by;

    if (i+text.length < string.length)
        newstr += replace(string.substring(i+text.length,string.length),text,by);
    
    return newstr;
}

function onCheck(string) { if (string == "on") return true; return false; }

function getValue(string,elementName,object,elementType) {
// gets value of elementName from string and populates object of elementType

    var startPos =...