let fields = [
  'MARTINAA/JAAAAA??!!',
  '"Du bist doch auch so einer, der ..."',
  'Brain-AFK',
  'Rant über Kollegen',
  'Redet in StammTV rein',
  'Häää?',
  'Bin mal kurz mitem Hund',
  '*schnupft*',
  'Habt ihr des neue ... schon gesehen?',
  'Random Nonsense-Problem',
  'Auf Ausbildung freuen',
  'Erzählt von Hinz und Kunz',
  'Was heißt eigentlich ...?',
  'Wiederholung',
  'Story geht länger als nötig',
  'Labert direkt los',
  'Haljo',
  'Klicken im Mikro',
  'Schlafen',
  'Akustik',
  'Spielt LoL',
  'Tamme Story',
  'Ich kam heut morgen auf Arbeit...',
  'Crypto / Fiat / Inflation ...'
];

let shuffled = fields
  .map(value => ({ value, sort: Math.random() }))
  .sort((a, b) => a.sort - b.sort)
  .map(({ value }) => value)

shuffled.splice(12, 0, "Freies Parken");

function generateTable() {
  let table = document.querySelector("table");
  let thead = table.createTHead();
  let row = null;//thead.insertRow();
  shuffled.forEach(function(field, index) {
    if (index % 5 == 0){
      row = thead.insertRow();
    }
    let cell = row.insertCell();

    let text = document.createTextNode(field);
    cell.appendChild(text);
  });

  table.addEventListener('click', (ev) => {
    if (ev.target.tagName.toLowerCase() == "td" ) {
        let cell = ev.target;
        if (cell.style.borderColor == "green") {
          cell.style.borderColor = "black";
          cell.style.backgroundColor = "white";
        } else {
          cell.style.borderColor = "green";
          cell.style.backgroundColor = "green";
        }
    }
  });
}

generateTable();