function renderMessages(loggedIn, messageList, $messageListContainer) {
    messageList.forEach(function(message) {
        $messageListContainer.append(`
            <div class="message-container">
                <div class="message-title">
                    ${message.username}

                    <span class="message-timestamp">
                        at ${message.time}
                        &nbsp;(id: ${message.message_id})
                    </span>
                </div>

                <div class="message-box ${loggedIn ? `message-box-selectable` : ``}" data-message-id="${message.message_id}">
                    ${message.message_text}
                </div>

                <div class="reply-form" id="reply-container-${message.message_id}">
                    ${loggedIn ? (`<form id="reply-to-${message.message_id}">
                        <div class="textarea-container">
                            <textarea form="reply-to-${message.message_id}" name="comment"></textarea>
                        </div>

                        <input type="submit">
                    </form>`) : ``}
                </div>
            </div>
        `)
    });
}