Edit in JSFiddle

$("#login").click(function () {
    var selected = $("#users").val();
    if ($("#username").val().length > 0) {
        $("#login").attr("disabled", "disabled");
        $("#username").attr("disabled", "disabled");

        var username = $("#username").val();

        var users = {};

        var presenceChange = function () {
            selected = $("#users").val();
            $("#users").empty();
            var options = "<option>Don't encrypt messages.</option>";
            for (var user in users) {
                if (user === username) {
                    options += '<option disabled>' + user + '</option>';
                } else {
                    options += '<option>' + user + '</option>';
                }
            }
            $("#users").append(options);
            $("#users").val(selected);
        };

        var presenceHandler = function (msg) {
            if (msg.action === "join" || msg.action === "state-change") {
                if ("data" in msg) {
                    users[msg.data.username] = msg.data.publicKey;
                } else {
                    pubnub.here_now({
                        channel: 'encrypted_messaging',
                        state: true,
                        callback: herenowUpdate
                    });
                }
                presenceChange();
            } else if (msg.action === "timeout" || msg.action === "leave") {
                delete users[msg.uuid];
                presenceChange();
            } else {

                pubnub.here_now({
                    channel: 'encrypted_messaging',
                    state: true,
                    callback: herenowUpdate
                });
            }
        };

        var pubnub = PUBNUB.init({
            publish_key: 'demo',
            subscribe_key: 'demo',
            uuid: username,
            ssl: username
        });

        var RSAkey = cryptico.generateRSAKey(1024);
        var publicKey = cryptico.publicKeyString(RSAkey);

        var onMessage = function (m) {
            var row = "<tr><td>" + m.sender + "</td><td>" + m.recipient + "</td>";
            var text = m.message;
            if (m.encryption) {
                text = text.cipher;
                $("#encrypted-messages").prepend(row + "<td>" + text + "</td></tr>");
                text = cryptico.decrypt(text, RSAkey);
                console.log(text);
                if (text.status === "failure") {
                    text = "Could not decrypt";
                } else {
                    text = text.plaintext;
                }

                $("#decrypted-messages").prepend(row + "<td>" + text + "</td></tr>");
            } else {
                row = row + "<td>" + text + "</td></tr>";
                $("#encrypted-messages").prepend(row);
                $("#decrypted-messages").prepend(row);
            }
        };

        pubnub.subscribe({
            channel: 'encrypted_messaging',
            callback: onMessage,
            presence: presenceHandler,
            state: {
                username: username,
                publicKey: publicKey
            }
        });

        var herenowUpdate = function (msg) {
            users = {};
            for (var i = 0; i < msg.uuids.length; i++) {
                if ("state" in msg.uuids[i]) {
                    users[msg.uuids[i].state.username] = msg.uuids[i].state.publicKey;
                }
            }
            if (!(username in users)) {
                setTimeout(function () {
                    pubnub.here_now({
                        channel: 'encrypted_messaging',
                        state: true,
                        callback: herenowUpdate
                    });
                }, 500);
            }
            presenceChange();
        };

        var sendMessage = function () {
            var msg = $("#input").val();
            var recipient = $("#users").val();
            if (msg.length > 0 && recipient in users) {
                $("#input").val('');
                msg = cryptico.encrypt(msg, users[recipient]);

                pubnub.publish({
                    channel: 'encrypted_messaging',
                    message: {
                        encryption: true,
                        recipient: recipient,
                        sender: username,
                        message: msg
                    }
                });
            } else if (msg.length > 0 && recipient === "Don't encrypt messages.") {
                $("#input").val('');
                pubnub.publish({
                    channel: 'encrypted_messaging',
                    message: {
                        encryption: false,
                        recipient: "<strong>EVERYONE</strong>",
                        sender: username,
                        message: msg
                    }
                });
            }

        };
        $("#send ").click(function () {
            sendMessage();
        });

        $("#input ").keypress(function (e) {
            if (e.which === 13) {
                $("#send ").click();
            }
        });
    }
});


$("#username ").keypress(function (e) {
    if (e.which === 13) {
        $("#login ").click();
    }
});

<div class="jumbotron">
     <h1>Encrypted Messaging with PubNub</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">
        <div class="col-sm-4">
             <h3>Send a Message</h3>

             <h5>Select a user to encrypt with their public key.</h5>

            <select id="users" class="form-control">
                <option select>Don't encrypt messages.</option>
            </select>
            <hr>
            <div class="input-group">
                <input id="input" 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-sm-4">
             <h3>Messages</h3>

            <div class="table-responsive">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th>Sender</th>
                            <th>Recipient</th>
                            <th>Message</th>
                        </tr>
                    </thead>
                    <tbody id="encrypted-messages"></tbody>
                </table>
            </div>
        </div>
        <div class="col-sm-4">
             <h3>Decrypted Messages</h3>

            <div class="table-responsive">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th>Sender</th>
                            <th>Recipient</th>
                            <th>Message</th>
                        </tr>
                    </thead>
                    <tbody id="decrypted-messages"></tbody>
                </table>
            </div>
        </div>
    </div>
</div>