diff --git a/index.html b/index.html
index 9f2c901..0413df5 100644
--- a/index.html
+++ b/index.html
@@ -77,7 +77,7 @@
           </div>
         </div>
 
-        <div class="card-body">
+        <div class="card-body" id="race-infobox">
           TODO: Put diagram details here.
         </div> <!-- card-body -->
 
diff --git a/js/main.js b/js/main.js
index 7e50ed4..4d22b41 100644
--- a/js/main.js
+++ b/js/main.js
@@ -54,15 +54,19 @@ preprocessor.load(function(data) {
             "<div class=\"courseimagecontainer\"></div>" + raceD.raceInfo.date.toLocaleDateString("de-DE") + "</li>");
 
 	  $("#courseSelection li").click(function(event) {
+	    var raceI = event.currentTarget.attributes.data.value;
+            // Internal check if element was already selected
+            if(slyelement.curRaceId == raceI){ return true; }
+            slyelement.curRaceId = raceI;
             // Clear previously selected courses
             $("#courseSelection .selected").removeClass("selected");
             // Mark selected course
             $(event.currentTarget).addClass("selected");
-            // Hand off to diagram rendering
-	    var raceI = event.currentTarget.attributes.data.value;
-            if(slyelement.curRaceId == raceI){ return; }
-            slyelement.curRaceId = raceI;
+            // Fetch race data
 	    var rdata = slyelement.curRaces.filter(r => r.raceInfo.raceId == raceI)[0];
+            // Put information about race into info box
+            $("#race-infobox").html("joah");
+            // Hand off to diagram rendering
 	    $("#lineGraphBox").empty();
   	    createLineGraph("#lineGraphBox", rdata);
 	});