JSFiddle - React, Tailwind, and code Playground

HTML

<TABLE BORDER=3 CELLSPACING=3 CELLPADDING=3> 
    <TR>
    <TD COLSPAN="7" ALIGN=center><B>First Visit Calendar</B></TD> 
    </TR>
    <TR> 
    <TD COLSPAN="7" ALIGN=center><I>Select your Gender</I><select id="gender"><option value="Male">Male</option><option value="Female">Female</option></select></TD>
    </TR>
    <TR> 
    <TD COLSPAN="7" ALIGN=center><I>Select your Date</I></TD>
    </TR>
    <TR> 
    <TD ALIGN=center>Sun</TD>
    <TD ALIGN=center>Mon</TD>
    <TD ALIGN=center>Tue</TD>
    <TD ALIGN=center>Wed</TD>
    <TD ALIGN=center>Thu</TD>
    <TD ALIGN=center>Fri</TD>
    <TD ALIGN=center>Sat</TD>
    </TR>
    <TR> 
    <TD ALIGN=center></TD>
    <TD ALIGN=center></TD>
    <TD ALIGN=center></TD>
    <TD ALIGN=center></TD>
    <TD ALIGN=center></TD>
    <TD ALIGN=center></TD>
    <TD ALIGN=center onclick="focusMe(this);"><input type="button" value="1"></TD>
    </TR>
    <TR> 
    <TD ALIGN=center onclick="focusMe(this);"><input type="button" value="2"></TD>
    <TD ALIGN=center onclick="focusMe(this);"><input type="button" value="3"></TD>
    <TD ALIGN=center onclick="focusMe(this);"><input type="button" value="4"></TD>
    <TD ALIGN=center onclick="focusMe(this);"><input type="button" value="5"></TD>
    <TD ALIGN=center onclick="focusMe(this);"><input type="button" value="6"></TD>
    <TD ALIGN=center onclick="focusMe(this);"><input type="button" value="7"></TD>
    <TD ALIGN=center onclick="focusMe(this);"><input type="button" value="8"></TD>
    </TR>
    <TR> 
    <TD ALIGN=center onclick="focusMe(this);"><input type="button" value="9"></TD>
    <TD ALIGN=center onclick="focusMe(this);"><input type="button" value="10"></TD>
    <TD ALIGN=center onclick="focusMe(this);"><input type="button" value="11"></TD>
    <TD ALIGN=center onclick="focusMe(this);"><input type="button" value="12"></TD>
    <TD ALIGN=center onclick="focusMe(this);"><input type="button" value="13"></TD>
    <TD ALIGN=center onclick="focusMe(this);"><input type="button"...

JavaScript

function reset(){
    var td = document.getElementsByTagName('td');
    for (var i = 0, length = td.length; i < length; i++) {
        td[i].style.backgroundColor = 'transparent';
    }
}

function focusMe(el) {
    //removing previous selection
    reset();
    switch (document.getElementById('gender').value) {
        case 'Male':
            if (el.firstChild.value == 3 || el.firstChild.value == 5)
                el.style.backgroundColor = "green";
            else
                el.style.backgroundColor = "red";
            break;
        case 'Female':
            if (el.firstChild.value == 5)
                el.style.backgroundColor = "green";
            else
                el.style.backgroundColor = "red";
            break;
    }
}