JSFiddle - React, Tailwind, and code Playground

HTML

<BODY>
    <!--When the button is clicked it shhould "create" the map like in the function -->
			<button type="button" onclick="shuffle();">Start The game!</button>
			<TABLE>
				<TR>
        <!-- when a cell is clicked it calls the function so it tests if it's a bom or if it's not and it prints out the name of the element.-->
					<TD class='terrain' id='1' name="" onclick="scriptPisadela('1');"></TD>
					<TD class='terrain' id='2' name="" onclick="scriptPisadela('2');"></TD>
					<TD class='terrain' id='3' name="" onclick="scriptPisadela('3');"></TD>
					<TD class='terrain' id='4' name="" onclick="scriptPisadela('4');"></TD>
					<TD class='terrain' id='5' name="" onclick="scriptPisadela('5');"></TD>
					<TD class='terrain' id='6' name="" onclick="scriptPisadela('6');"></TD>
					<TD class='terrain' id='7' name="" onclick="scriptPisadela('7');"></TD>
				</TR>
				<TR>
					<TD class='terrain' id='8' name="" onclick="scriptPisadela('8');"></TD>
					<TD class='terrain' id='9' name="" onclick="scriptPisadela('9');"></TD>
					<TD class='terrain' id='10' name="" onclick="scriptPisadela('10');"></TD>
					<TD class='terrain' id='11' name="" onclick="scriptPisadela('11');"></TD>
					<TD class='terrain' id='12' name="" onclick="scriptPisadela('12');"></TD>
					<TD class='terrain' id='13'  name=""onclick="scriptPisadela('13');"></TD>
					<TD class='terrain' id='14'  name=""onclick="scriptPisadela('14');"></TD>
				</TR>
				<TR>
					<TD class='terrain' id='15' name="" onclick="scriptPisadela('15');"></TD>
					<TD class='terrain' id='16' name="" onclick="scriptPisadela('16');"></TD>
					<TD class='terrain' id='17' name="" onclick="scriptPisadela('17');"></TD>
					<TD class='terrain' id='18' name="" onclick="scriptPisadela('18');"></TD>
					<TD class='terrain' id='19' name="" onclick="scriptPisadela('19');"></TD>
					<TD class='terrain' id='20' name="" onclick="scriptPisadela('20');"></TD>
					<TD class='terrain' id='21' name=""...

JavaScript

//This function tests if the cell that was clicked is a bomb or not and it prints out it's name so it's visible to the user. I think this is working fine, the problem is in the next function
<script type="text/javascript">
		function scriptPisadela(myid){
		  var Name = document.getElementById(myid).attributes["name"].value;
			if(Name == 'x') document.getElementById(myid).className = 'bomb';
			else document.getElementById(myid).className = 'livre';
			var td = document.getElementById(myid);
			var text = document.createTextNode(Name);
			td.appendChild(text);
		}
	</script>
  // this function is suposedly to randomly sort the array in order to create a different map each time, I think that it is sorting it out correctly but when I set the attribute in the last "for" that part isn't working correctly.
  <script type="text/javascript">
  //Randomly sorts the array called numbers
	function shuffle()
	 {
	var numbers = [1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,'x','x','x','x',2,2,2,2,2,1,1,2,2];
	for (var i = numbers.length - 1; i > 0; i--) {
	        var j = Math.floor(Math.random() * (i + 1));
	        var temp = numbers[i];
	        numbers[i] = numbers[j];
	        numbers[j] = temp;
	    }

//The code below doesn't actually change the name of the element as far as I'm aware, but I can't understand why.
//It should be working and I can't figure out why.
for(var idx = 1; idx <= numbers.length + 1; idx ++)
document.getElementById(idx).setAttribute("name",numbers[idx - 1]);
	}
}
</script>