JSFiddle - React, Tailwind, and code Playground

by zoldello

HTML

<div>
    Add a Michael Jackson song: <br /> 
    <input type="text" data-bind="value: newMJSongToAdd"></input>
    <button data-bind="click: addMJSong">Add</button>
    
    <ul data-bind="foreach: mjSongList">
        <li>
            <span data-bind="text: $data"></span>
        </li>        
    </ul>
</div

JavaScript

;(function () {
    var mjSongViewModel = function () {
        var self = this;
        
        self.mjSongList = ko.observableArray(['HIStory', 'Dirty Diana']);
        
        self.newMJSongToAdd = ko.observable('');

        self.addMJSong = function() {
                var newSong = self.newMJSongToAdd();               
                                 
                self.mjSongList.push(newSong);
                self.newMJSongToAdd(''); 
            };                          
    };
    
    ko.applyBindings(new mjSongViewModel());    
})();