JSFiddle - React, Tailwind, and code Playground

HTML

<div class="chat-wrapper">
    <div class="user-list">
        <ul>
            <li class="contact" id="xXRiverSongXx">xXRiverSongXx</li>
            <li class="contact" id="IamTheMaster">IamTheMaster</li>
            <li class="contact" id="K9IsBoss">K9IsBoss</li>
            <li class="contact" id="GallifreyBoy">GallifreyBoy</li>
            <li class="contact" id="GallifreyBoy">GallifreyBoy</li>
        </ul>
    </div>
    <div class="spacer"></div>
    <div class="spacer spacer-row"></div>
</div>
<div class="chat-windows">
    <div class="box">
        <div class="chat-header"></div>
        <span class="close-chat" title="close">[x]</span>
        <div class="message-log">
            <ul class="messages"></ul>
        </div>
        <div class="chat-input">
            <form name="submit-message" action="javascript:void(0);" method="GET">
            <label for="chat-message">Message:</label>
            <input type="text" name="chat-message" class="chat-message" />

            <input type="submit" name="chat-action" class="chat-action" value="Send" />
                            </form>
        </div>
    </div>
</div>

CSS

.chat-wrapper {
    margin: 0px auto;
    width: 90%;
    border: solid 1px rgba(220, 220, 255, .8);
    border-radius: 3px;
    padding: 3px;
    display: table;
    background-color: rgba(240, 240, 240, .3);
}
.message-log {
    margin: 0px 2px;
    width: 65%;
    display: table-cell;
    height: 200px;
    border: solid 1px rgba(200, 200, 255, .7);
    border-radius: 3px 3px 8px 8px;
    min-width: 200px;
    background-color: #ffffff;
}
.spacer {
    width: 10px;
    display: table-cell;
    height: 10px !important;
}
.spacer-row {
    height: 10px;
    display: table-row;
}
.user-list {
    margin: 0px 2px;
    width: 30%;
    display: table-cell;
    height: 150px;
    border: solid 1px rgba(200, 200, 255, .7);
    border-radius: 3px 3px 8px 8px;
    background-color: #eeeeff;
    vertical-align: top;
}
.chat-input {
    display: table-row;
    width: 100%;
}
.messages {
    overflow: scroll;
    height: 92%;
    width: 98.5%;
    display: inline-block;
    padding: 2px;
}
.user-list UL {
    margin-left: 0px;
    padding: 5px;
    margin-top: 0px;
    text-indent: 2px;
    list-style-type: none;
}
.user-list UL LI {
    cursor: pointer;
}
.user-list UL LI:hover {
    background-color: rgba(0, 0, 0, .1);
}
.chat-windows .box {
    display: none;
    width: 200px;
    margin: 2px 3px;
    border: solid 1px #898989;
    padding: 6px;
    border-radius: 2px 2px 8px 8px;
}
.chat-windows DIV {
    display: inline-block;
}
.chat-header {
    display: inline-block;
    width: 175px;
}
.close-chat {
    display: inline-block;
    margin-right: 0px;
    cursor: pointer;
}
.user {
    font-weight: bold;
}

JavaScript

$(function () {
    var box = $('.box')[0]; //single copy of the target box
    $('.contact').click(function () {
        var id = $(this).closest('.contact').attr('id'); // load the user id
        if ($(".chat-windows").find("#" + id + "-window").exists()) {
            if($(".chat-windows").find("#" + id + "-window").is(":visible")) {
            //Do nothing, because the window is already there
            } else {
                $(".chat-windows").find("#" + id + "-window").fadeIn(200).css("display", "inline-block");
            }
        } else {
            //This is a new box, so show it
            var newBox = box.cloneNode();
            var windows = $(".chat-windows");
            $(newBox).find(".chat-header").text(id);
            $(newBox).prop("id", id + "-window");
            //var username = $(this).find('.username').attr('id');                   
            windows.append($(newBox));
            $(newBox).fadeIn(200).css("display", "inline-block");
            updateChat({
                ContactID: id
            });
            setInterval(function() {
              
                if($(newBox).is(":visible")) {
                    updateChat({ContactID: id});
                } else {
                    //do nothing so we aren't updating things that aren't seen and wasting time
                } // end if/else
            }, 10000); // fire every 10 seconds for this box
        } // end if/else

    });
    $(document).on("click", ".close-chat", function(e) {
        $(e.currentTarget).parent().fadeOut(100)[0].removeNode(); 
    });
    $(document).on("click", ".chat-action", function(e) {
        var userInput = $(e.currentTarget).parent().find("input[name='chat-message']").val();
        $(e.currentTarget).parents().find(".messages:first").append("<li><span class='user'>You: </span>" + userInput + "</li>");
        $(e.currentTarget).parent().find("input[name='chat-message']").val("");
    });
});

//Global prototype function to...