JSFiddle - React, Tailwind, and code Playground

HTML

<form name="frm1">
    <table>
        <tr>
            <td>Pattern Choice:</td>
            <td>
                <input type="radio" id="plus" name="radioButton" value="PlusSign" />Plus Sign</td>
            <td>
                <input type="radio" id="letterx" name="radioButton" value="LetterX" />Letter X</td>
            <td>
                <input type="radio" id="letterh" name="radioButton" value="LetterH" />Letter H</td>
        </tr>
        <tr>
            <td>Color Choice:</td>
            <td>
                <select id="color">
                    <option>Red</option>
                    <option>Blue</option>
                    <option>Yellow</option>
                    <option>Green</option>
                    <option>Orange</option>
                </select>
            </td>
        </tr>
        <table id="mytable">
            <TR>
                <TD></TD>
                <TD></TD>
                <TD></TD>
                <TD></TD>
                <TD></TD>
            </TR>
            <TR>
                <TD></TD>
                <TD></TD>
                <TD></TD>
                <TD></TD>
                <TD></TD>
            </TR>
            <TR>
                <TD></TD>
                <TD></TD>
                <TD></TD>
                <TD></TD>
                <TD></TD>
            </TR>
            <TR>
                <TD></TD>
                <TD></TD>
                <TD></TD>
                <TD></TD>
                <TD></TD>
            </TR>
            <TR>
                <TD></TD>
                <TD></TD>
                <TD></TD>
                <TD></TD>
                <TD></TD>
            </TR>
        </table>
        <tr> 
            <input type="button" value="Color It" onclick="colorit()" />
            <input type="button" value="Clear" onclick="clearit()" />        
        </tr>    
          </table>
</form>

CSS

#mytable {
    width:400px;
    border: 1pt solid black;
}
#mytable tr {
    height:50px;
}
#mytable td {
    width:20%;
    border: 1px solid black;
}

JavaScript

function colorit(){
	var letter;
	if(document.getElementById("plus").checked) letter = "+";
	else if(document.getElementById("letterx").checked) letter = "X";
	else if(document.getElementById("letterh").checked) letter = "H";

	var colorList = document.getElementById("color");
   var x = document.getElementById('mytable').getElementsByTagName('td');
   for(i=0;i<x.length;i++) {
     x[i].style.backgroundColor = colorList.options[colorList.selectedIndex].text;
       
	 x[i].innerHTML = letter;
   }
}

function clearit(){
   var x = document.getElementById('mytable').getElementsByTagName('td');
   for(i=0;i<x.length;i++) {
     x[i].style.backgroundColor = "";
	 x[i].innerHTML = "";
   }
}