// globals
    var messagesListEle = document.querySelector('ul#messages');

    // add message
    function addMessage(message){
        var messageContainer = document.createElement('DIV');
        messageContainer.textContent = message;
        messagesListEle.appendChild(messageContainer);
    }

    // update message
    function updateMessage(message, messageId){
        for (var i = 0; i < messagesListEle.children.length; i++) {
            if(messagesListEle[i].getAttribute('data-id') == messageId){
                messagesListEle[i].textContent = message;
                break;
            }
        }
    }

    // remove message
    function removeMessage(messageId){
        for (var i = 0; i < messagesListEle.children.length; i++) {
            if(messagesListEle[i].getAttribute('data-id') == messageId){
                messagesListEle[i].parentNode.removeChild(messagesListEle[i]);
                break;
            }
        }
    }

    // add a message before another message
    function addMessageBefore(message, messageId){
        for (var i = 0; i < messagesListEle.children.length; i++) {
            if(messagesListEle[i].getAttribute('data-id') == messageId){
                var messageContainer = document.createElement('DIV');
                messageContainer.textContent = message;
                messagesListEle.insertBefore(messageContainer, messagesListEle[i]);
                break;
            }
        }
    }