JSFiddle - React, Tailwind, and code Playground

HTML

<table  border="5px" width="500px" height="50px" align="center" id="mycolor">
<tr id="colors">
    <label><td  height="50px" ></td></label>
    <label><td height="50px" ></td></label>
          
    <label><td height="50px"  ></td></label>
    <label><td  height="50px" ></td></label>
           
    <label><td height="50px" ></td></label>
    <label><td height="50px" ></td></label>
          
    <label><td height="50px" ></td></label>
    <label><td height="50px" ></td></label>

            </tr>
            
            
            </table><br>

JavaScript

$(function() {
var arr=[];
var colorCells =document.getElementById('colors').getElementsByTagName('td');
var colors = ["blue","red","green","yellow","orange","pink","brown","black"];
    for(var i = 0; i < colorCells.length; i++)  {
        $(colorCells[i]).attr("bgColor", colors.splice(Math.random() * (colors.length),1)) ;
        arr.push(colorCells[i].style.backgroundColor);
    }
    
    var colorValues	= {"red": 2, "blue":3, "green": 4, "yellow":"1", "orange":5, "black":1, "brown":6, "pink":5};
    $("table td").each(function() {
    	$(this).html(colorValues[$(this).attr("bgColor")]);
    });
 });