event.watch spits out events in random order

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