JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.1.0/knockout-min.js"></script>
<input type="text" data-bind="value:sendMsgText, valueUpdate: 'input', executeOnEnter: sendMessage" />


<ul data-bind="foreach: sentMessages">
    <li><span data-bind="text: message"></span></li>
</ul>

JavaScript

ko.bindingHandlers.executeOnEnter = {
    init: function (element, valueAccessor, allBindings, viewModel) {
        var callback = valueAccessor();
        $(element).keypress(function (event) {
            var keyCode = (event.which ? event.which : event.keyCode);
            if (keyCode === 13) {
                callback.call(viewModel);
                return false;
            }
            return true;
        });
    }
};

function contactsModel() {
    var self = this;
    self.jid = ko.observable();
    self.userName = ko.observable();
    self.sendMsgText = ko.observable();
    self.sentMessages = ko.observableArray();
    self.sendMessage = function () {
        if (self.sendMsgText() === '') {
            alert("Enter something in input field");
        } else {
            var message = {
                to: self.userName(),
                message: self.sendMsgText()
            };
            self.sentMessages.push(message);

        }

    };
}
ko.applyBindings(new contactsModel());