TImeTable

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Spelschema</title>
  <script>
  class Artist {
    constructor(time,genre,name) {
      this.time = time;
      this.genre = genre;
      this.name = name;
    }
  }

  var mainstage = [new Artist("21.00-22.00","DnB","Jesper Persson & Daniel Tyngel"),new Artist("22.00-23.00","Trap","Anders Persson"),new Artist("23.00-00.00","Dubstep","Peps Persson"),new Artist("00.00-01.00","Trap","Anders Persson"),new Artist("01.00-02.00","Trap","Anders Persson"),new Artist("02.00-03.00","Trap","Anders Persson")];
  var darkstage = [new Artist("21.00-22.00","Techno","Jesper Persson"),new Artist("22.00-23.00","Tech House","Anders Persson")];

  function setColor(btn){
    var div = document.getElementById('timetable');

    while(div.firstChild){
      div.removeChild(div.firstChild);
    }

    if (btn == 'mainstage') {
   	  document.getElementById('mainstage').style.backgroundColor= 'lightgray';
      document.getElementById('darkstage').style.backgroundColor= 'red';
      createTimeSlots(mainstage);
    }
    else {
      document.getElementById('mainstage').style.backgroundColor= 'red';
      document.getElementById('darkstage').style.backgroundColor= 'lightgray';
      createTimeSlots(darkstage);
    }
  }

  function createTitle(title){
      var para = document.createElement("H1");
      para.innerHTML = title;
      para.setAttribute("id", "stage");
      document.getElementById("timetable").appendChild(para);
  }

  function createTimeSlots(stage){
    if(stage == mainstage){
      createTitle("Mainstage");
    }
    else{
      createTitle("Darkstage");
    }

    for(var i = 0; i < stage.length; i++){
      var node = document.createElement("DIV");
      node.setAttribute("id", "timeslot");

      var textnode = document.createElement("P");
      textnode.setAttribute("class", "slot1");
      textnode.innerHTML = stage[i].time;
      node.appendChild(textnode);

      textnode = document.createElement("P");
      textnode.setAttribute("class", "slot2");
      textnode.innerHTML = stage[i].genre;
      node.appendChild(textnode);

      textnode = document.createElement("P");
      textnode.setAttribute("class", "slot3");
      textnode.innerHTML = stage[i].name;
      node.appendChild(textnode);

      document.getElementById("timetable").appendChild(node);
    }
  }
  </script>

  <style>
  #mainstage{
    border:none;
    background-color:lightgray;
    padding: 20px;
    font-size:16px;
  }

  #darkstage{
    border:none;
    background-color:red;
    padding: 20px;
    font-size:16px;
  }

  #timetable{
    width:800px;
    background-color:lightgray;
    padding: 20px;
  }

  #stage
  {
    text-align:center;
  }

  #timeslot
  {
    width:90%;
    margin:0 auto;
    display:flex;
    border-top: 1px solid gray;
  }

  .slot1
  {
    justify-content:left;
    width:20%;
  }

  .slot2
  {
    justify-content:left;
    width:40%;
  }

  .slot3
  {
  	justify-content:left;
    width:40%;
  }

  #timeslot p
  {
    text-align:center;
    font-size:20px;
  }

  </style>
</head>
<body onload="createTimeSlots(mainstage)">
  <input type="button" id="mainstage" value="MAINSTAGE" onclick="setColor('mainstage');" />
  <input type="button" id="darkstage" value="DARKSTAGE" onclick="setColor('darkstage');" />

  <div id="timetable">
  </div>

</body>
</html>