Self-Destructing Messages

Self-Destructing Messages with PubNub.

HTML

<script src="http://cdn.pubnub.com/pubnub.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://rawgit.com/lw7360/babel/gh-pages/js/libs/cryptico.js"></script>
<script src="https://rawgit.com/lw7360/explode.js/gh-pages/explode.js"></script>
<div class="jumbotron">
     <h1>Self-Destructing Messages</h1> 
    <br>
    <div class="input-group"> <span class="input-group-addon">Username</span>

        <input id="username" type="text" class="form-control" placeholder="'doge'"> <span class="input-group-btn">
            <button id="login" type="button" class="btn btn-primary">Login</button>
            </span>

    </div>
</div>
<div class="container">
    <div class="row">
         <h3>Send a Message</h3>

        <div class="col-md-2">
             <h5>Select a user to send your message to.</h5>

            <select id="users" class="form-control">
                <option select>Send it to everyone.</option>
            </select>
        </div>
        <div class="col-md-2">
             <h5>Enter a TTL for your message.</h5>

            <div class="input-group">
                <input id="ttl" type="number" class="form-control" value="5"> <span class="input-group-addon">TTL</span>

            </div>
        </div>
        <div class="col-md-4">
            <div class="input-group">
                <input id="message" type="text" class="form-control" placeholder="Type your message here."> <span class="input-group-btn">
        <button id="send" class="btn btn-default" type="button">Send</button>
      </span>

            </div>
        </div>
        <div class="col-md-4">
             <h3>Messages</h3>

            <div class="table-responsive">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th>Sender</th>
                            <th>Recipient</th>
                           ...

JavaScript

$("#login").click(function () {
    var username = $("#username").val();
    if (username.length > 0) {
        $("#login").attr("disabled", "disabled");
        $("#username").attr("disabled", "disabled");
        var pubnub = PUBNUB.init({
    publishKey: 'pub-c-cacc6b52-a7eb-4023-aba9-5ab22e57c05c',
    subscribeKey: 'sub-c-a47aa7b6-6e20-11e8-9683-aecdde7ceb31'
            uuid: username,
            ssl: true
        });
        var selected = $("#users").val();

        var mID = 0;
        var onMessage = function (m) {
            mID++;
            var msgID = mID;
            $("#messages").prepend("<tr id='" + msgID + "'><td>" + m.sender + "</td><td>" + m.recipient + "</td><td>" + m.message + "</td><td id='" + msgID + "ttl'>" + m.ttl + "</tr>");
            var updateTTL = setInterval(function () {
                var ttl = $("#" + msgID + "ttl").text();
                if (parseInt(ttl) <= 0) {
                    explode($("#" + msgID));
                    $("#" + msgID).remove();
                    clearInterval(updateTTL);
                } else {
                    $("#" + msgID + "ttl").text(ttl - 1);
                }
            }, 1000);
        };
        var onPresence = function () {
            pubnub.here_now({
                channel: 'self-destructing messages',
                callback: function (m) {
                    if (m.uuids.indexOf(username) === -1) {
                        onPresence();
                    } else {
                        var selected = $("#users").val();
                        $("#users").empty();
                        $("#users").append("<option>Send it to everyone.</option>");
                        for (var i = 0; i < m.uuids.length; i++) {
                            var str = "<option ";
                            if (m.uuids[i] === username) {
                                str += "disabled";
                            } else if (m.uuids[i] === selected) {
                                str...