JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.js"></script>
<script src="http://cloud.github.com/downloads/rniemeyer/knockout-sortable/knockout-sortable.min.js"></script>
Sortable:
<div class="container" data-bind="sortable: {data: posts, afterMove: changeTime} ">
    <div class="item">
        <span data-bind="text: time"></span>
        -
        <span data-bind="text: title"></span>
    </div>
</div>
<hr/>
<button id="save" data-bind="click: $root.update" class="btn btn-success">Save</button>
<div id="result"></div>

CSS

.item{

    display: block; 
    background: #C0C0C0; 
    margin-bottom: 5px;
    width: 200px;
}

.container {
    margin: 20px;
    padding: 5px;
    border: 1px solid black;
    width: 200px;        
}

JavaScript

var Post = function( time, title) {
    this.time = ko.observable( time );
    this.title = ko.observable( title );
};


function GridModel(){
    
    var self = this;
    
    posts = [
        {time: "07:00", title: "test#1"},
        {time: "08:00", title: "work#2"},     
        {time: "09:00", title: "task#3"},    
        {time: "10:00", title: "sleep#4"}
    ];
    
    self.posts = ko.observableArray( ko.utils.arrayMap( posts , function( post ) {
            return new Post( post.time, post.title);
    }));
    
    self.times = ko.observableArray(["07:00","08:00","09:00","10:00"]);
    
    self.clone;
    
    self.selectedPost = ko.observable();
    
    self.clearPost = function(data, event) {
        if (data === self.selectedPost()) {
            self.selectedPost(null);                
        }

        if (data.name() === "") {
           self.posts.remove(data);   
        }
    }

    self.isPostSelected = function(post) {
       return post === self.selectedPost();  
    }

   
    self.changeTime = function(arg){
        
        var count = 0;
        
        ko.utils.arrayForEach(self.posts(), function(post) {
            post.time(self.times()[count]);
            count++;
        });
        
    }
        
    self.update = function(){
            
        var values = [
            {time: "17:00", title: "test#11"},
            {time: "18:00", title: "work#22"},     
            {time: "19:00", title: "task#33"},    
            {time: "20:00", title: "sleep#14"}
        ];
            
        self.clone = ko.observableArray(ko.utils.arrayMap( values , function( clone) {
            return new Post(clone.time, clone.title);
        }));

        var count = 0;

        ko.utils.arrayForEach(self.posts(), function(post) {
            post.time(self.clone()[count].time());
            post.title(self.clone()[count].title());
            count++;
        });           
  
        var after = ko.toJSON(self.clone);
   
       ...