JSFiddle - React, Tailwind, and code Playground

HTML

<html lang="DE"><head>
<!--meta charset='UTF-8"-->
<title>Kniffel Würfelspiel</title>
</head>
<body>

<table>

<thead>
<tr>
<th id="0" colspan="2">
<div class="alle-wuerfel">
<p class="wuerfel" id="000"></p>
<p class="wuerfel" id="001"></p>
<p class="wuerfel" id="002"></p>
<p class="wuerfel" id="003"></p>
<p class="wuerfel" id="004"></p>
</div>
</th>
</tr>
</thead>

  <tbody>
<tr>
<td id="11">alle Einser</td>
<td id="21">Dreierpasch</td>
</tr>
<tr>
<td id="12">alle Zweier</td>
<td id="22">Viererpasch</td>
</tr>
<tr>
<td id="13">alle Dreier</td>
<td id="23">Full House</td>
</tr>
<tr>
<td id="14">alle Vierer</td>
<td id="24">Kleine Straße</td>
</tr>
<tr>
<td id="15">alle Fünfer</td>
<td id="25">Große Straße</td>
</tr>
<tr>
<td id="16">alle Sechser</td>
<td id="26">Kniffel</td>
</tr>
<tr>
<td id="17">Bonus</td>
<td id="27">Chance</td>
</tr>
</tbody><tbody>
 </tbody><tfoot>
<tr>
<td colspan="2">
<button id="start" onclick="starteSpiel()">START</button>
</td>
</tr>
</tfoot>
</table>

</body></html>

CSS

body{
background: #007063;
}

table{
/* width: px; */
border: 1px;
font-family: Verdana, sans-serif;
font-size: 20px;
font-weight: normal;
text-align: left;
}

button{
width: 140px;
height: 40px;
}

.alle-wuerfel{
display: flex;
}

.wuerfel {
  width: 80px;
  height: 80px;
  border: 1px solid black;
  margin: 8px;
  padding: 1px;
  border-radius: 6px;
  background-color: #e6f2f7;
  text-align: center;
}

.selected {
  border: 2px solid red;
}

#punkt {
width: 12px;
height: 12px;
border-radius: 6px;
background-color: green;
}

tfoot{
text-align: center;
}

JavaScript

var aktuelleZahlen = new Array();

if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', addClickListener);
} else { 
  addClickListener();
}

function addClickListener()
{
	for (let i=0; i < 5; i++) {
    document.getElementById('00' + i).addEventListener('click', einRahmen, false); 
  }
}

function starteSpiel()
{
  document.querySelector('button').innerHTML ='würfeln';
  wuerfeleAlles()
  zeigeAlles()
  sortiereAufsteigend()
}

function einRahmen()
{
  console.log('gewählt: ' + this);
  this.classList.toggle("selected");
} 

function wuerfeleAlles()
{
	var el;
  for (let i=0; i < 5; i++) {
    aktuelleZahlen[i] = Math.floor(Math.random() * 6 + 1);
    el = document.getElementById('00' + i);
    el.innerHTML = aktuelleZahlen[i];
    el.classList.remove("selected");
  }
}

function sortiereAufsteigend(){
var anz=0;
var h;	

				for(let a=0;a<5;a++){

 for (var i=0; i<5;i++)
	{ 
	while(aktuelleZahlen[i]>aktuelleZahlen[i+1])
	{ 	h=aktuelleZahlen[i];
		aktuelleZahlen[i]=aktuelleZahlen[i+1];
		aktuelleZahlen[i+1]=h;
		anz++;
	}
	}
console.log('Sortiert '+aktuelleZahlen+' geprüft mal '+anz);
									}
}

function zeigeAlles()
{
	for (let i=0; i<5; i++) {
		document.getElementById('00'+i).innerHTML=aktuelleZahlen[i];
	}
	console.log(aktuelleZahlen);
}