let fields = [
  'MARTINAA',
  'JAAAAA??!!',
  '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',
  'Schlafen',
  'A',
  'B',
];

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();