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>
<script src="https://raw.github.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.js"></script>
"IF" Array
<div class="container" data-bind="sortable: {data: posts, afterMove: changeTime, isEnabled: enabled} ">
    <div class="item">
        <span data-bind="text: time"></span>
        -
        <span data-bind="text: title"></span>
    </div>
    <!-- ko if: time() == $root.limit() -->
    <div class="delimiter"></div>
    <!-- /ko -->
</div>
<hr/>
"VISIBLE" Array
<div class="container" data-bind="sortable: {data: posts, afterMove: changeTime, isEnabled: enabled} ">
    <div class="item">
        <span data-bind="text: time"></span>
        -
        <span data-bind="text: title"></span>
    </div>
    <div class="delimiter" data-bind="visible: time() == $root.limit()"></div>
</div>

CSS

.item{

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

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

.delimiter {
    width: 200px;
    height: 5px;
    background-color: red;
    margin-bottom: 5px;
}

JavaScript

function GridModel() {
    var self = this,

        posts = [
            {
            time: "07:00",
            title: "test#1",
            type: "odd"},
        {
            time: "08:00",
            title: "work#2",
            type: "even"},
        {
            time: "09:00",
            title: "task#3",
            type: "odd"},
        {
            time: "10:00",
            title: "sleep#4",
            type: "even"},
        {
            time: "11:00",
            title: "wake#5",
            type: "odd"}
        ],

        postmapping = {
            key: function(item) {
                return ko.utils.unwrapObservable(item.time);
            }
        };

    self.posts = ko.mapping.fromJS(posts, postmapping);

    self.times = ko.observableArray(["07:00", "08:00", "09:00", "10:00", "11:00"]);

    self.enabled = ko.observable(true);
    
    self.limit = ko.observable("11:00");
    
    self.changeTime = function(arg){
            
        var count = 0;
      
        ko.utils.arrayForEach(self.posts(), function(post) {
        
            post.time(self.times()[count]);
           
            count++;

        });
        
    }

}

ko.bindingHandlers.sortable.options = {
        
    items: ".item",
        
}
        

var Grid_Model = new GridModel();
ko.applyBindings(Grid_Model);