JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
  <body onload="getOnlineIds()">
      <div class="main">
          <div class="navigation">
              <a href="?loc=bad">bad</a> • 
              <a href="?loc=erf">erf</a> • 
              <a href="?loc=ess">ess</a> • 
              <a href="?loc=ffb">ffb</a> • 
              <a href="?loc=goe">goe</a> • 
              <a href="?loc=hal">hal</a> • 
              <a href="?loc=ham">ham</a> • 
              <a href="?loc=jen">jen</a> • 
              <a href="?loc=koe">koe</a> • 
              <a href="?loc=lei">lei</a> • 
              <a href="?loc=mue">mue</a> • 
              <a href="?loc=rau">rau</a> • 
              <a href="?loc=wil">wil</a> • 
              <a href="?loc=wit">wit</a>
          </div>
          <div class="search">
              Suche: <input type="text" id="onlineinput" onkeyup="getOnlineComms()">
          </div>
          <div class="onlines" id="onlinelist"></div>
          <div class="ids" id="ids"></div>
          <div class="log" id="log"></div>
       </div>
   </body>

CSS

/* 
    Document   : style
    Created on : 24.06.2013, 12:00:02
    Author     : frostmarco
    Description:
        Main style sheet
*/
html {
	width: 100%;
	height: 100%;
}
body {
	background-image: url("img/background.png");
	background-position: center;
	background-attachment: fixed;
	background-repeat: no-repeat;
	font-family: Arial;
}
div.debug {
        position: fixed;
        top: 0px;
        left: 0px;
}
div.main {
	width: 100%;
	height: 100%;
}
div.navigation {
	width: 100%;
	height: 5%;
	text-align: center;
}
div.search {
	width: 25%;
	height: 5%;
	text-align: left;
        vertical-align: center;
}
div.onlines {
        left: 0%;
        top: 10%;
	width: 15%;
	height: 90%;
	text-align: center; 
        position: absolute;
        overflow-y: scroll;
}
div.ids {
        left: 15%;
        top: 10%;
	width: 15%;
	height: 90%;
	text-align: center;
        position: absolute;
}
div.log {
        left: 30%;
        top: 10%;
	width: 70%;
	height: 90%;
	text-align: center;
        position: absolute;
}
h1 {
	text-align: center;
}
li {
        text-align: left;
}
p.left {
        text-align: left;
}
p.error {
        color: red;
}
a.clickable:link {
        color: black;
}
a.clickable:hover {
        color: green;
}

JavaScript

function getOnlineComms() {
    var loc = window.location.search.replace("?","").split("=")[1];
    var onlinelist = document.getElementById("onlinelist");
    onlines = new Array();
    $.ajax({
        url: "getOnlineComms.php",
        type: "POST",
        data: {
            online: $("#onlineinput").val(), 
            location: loc
        },
        dataType: "JSON",
        success: function (msg) { 
            onlines = msg;
            onlinelist.innerHTML="";
            for (index = 0; index < onlines.length; ++index)
                {
                    onlinelist.innerHTML+="<a href=\"?loc="+loc+"&comm="+onlines[index][0]+"\" onclick=\"getOnlineIds()\">"+onlines[index][1]+"</a><br>";
                }
        }
    });        
}
function getOnlineIds() {
    var params = window.location.search.replace("?","");
    if(params!="" && params.split("&").length == 2)
    {
        var splitted = params.split("&");
        var loc, comm;
        for (index = 0; index < splitted.length; ++index)
            {
                if(splitted[index].split("=")[0] == "loc")
                {
                    loc = splitted[index].split("=")[1];
                }
                if(splitted[index].split("=")[0] == "comm")
                {
                    comm = splitted[index].split("=")[1]
                }
            }
        var loc = splitted[0].split("=")[1];
        var comm = splitted[1].split("=")[1];
        var idlist = document.getElementById("ids");
        ids = new Array();
        $.ajax({
            url: "getOnlineIds.php",
            type: "POST",
            data: {
                comm: comm, 
                location: loc
            },
            dataType: "JSON",
            success: function (msg) {
                ids = msg;
                idlist.innerHTML="";
                for (index = 0; index < ids.length; ++index)
                    {
                        idlist.innerHTML+="<a...