web3 - event.watch spits out events in random order - solidity

Question

I am watching an event:
var events = EthProj.Message({}, { fromBlock: 0, toBlock: 'latest'});
events.watch((error, results) => {
Inside the event I do this tempString = ((messages.split(":")[1].split(",")[0] + " (From: " + messages.split(":")[2].split("}")[0]) + ")").replace(/"/g, ''); Which, long story short, makes a string from the event giving the event from the block (i.e. It gives the event made at block 173).
I then set a <h2> element's text from each event. When this happens it sets them in a seemingly random order. What can be going on, it sets them from block 0 to the latest block, so how can this happen.
Here is the full code: https://pastebin.com/wGt5kL1Y
var events = EthProj.Message({}, { fromBlock: 0, toBlock: 'latest'});
events.watch((error, results) => {
i++;
messages = "";
messages = JSON.stringify(results.args);
if(i === messageToGet) {
if(messages.split(":")[1].split(",")[0] != '""') {
console.log(messages.split(":")[1].split(",")[0] + " (From: " + messages.split(":")[2].split(",")[0].split("}")[0].split("}")[0] + ")");
tempString = ((messages.split(":")[1].split(",")[0] + " (From: " + messages.split(":")[2].split("}")[0]) + ")").replace(/"/g, '');
} else {
console.log("(No included text)" + "(From: " + messages.split(":")[2].split(",")[0].split("}")[0] + ")");
tempString = (("(no included text) " + " (From: " + messages.split(":")[2].split("}")[0]) + ")").replace(/"/g, '');
}
if((messages.split(":")[1].split(",")[0] === undefined) || (messages.split(":")[2].split(")")[0] === undefined)) {
return;
}
if(document.getElementById("Message" + placeToSet) != null) {
document.getElementById("Message" + placeToSet).remove();
if(document.getElementById("hr" + placeToSet) != null) {
document.getElementById("hr" + placeToSet).remove();
}
}
if(document.getElementById("Message" + placeToSet) === null) {
var newh2 = document.createElement('h2');
newh2.setAttribute("id", ("Message" + placeToSet));
var text = document.createTextNode(tempString);
newh2.appendChild(text);
document.body.appendChild(newh2);
var newHR = document.createElement('hr');
newHR.setAttribute("id", ("hr" + placeToSet));
}
}
});