JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<div class="container">
    <div class="rangeContainer" data-bind="foreach: ranges">
        <p class="range">
            <span>START: <span data-bind="text: start"></span></span><br />
            <span>END: <span data-bind="text: end"></span></span>
        </p>
    </div>
</div>

<button onclick="Test()" />Test</button>

JavaScript

var ParentViewModel = function (data) {
    var self = this;

    self.ranges = ko.observableArray([]);

    data.Ranges.forEach(function (range) {
        self.ranges.push(new RangeViewModel(range));
    });

    self.Test = function() {
        self.ranges.push({start:'', end:''});
    }
};

var RangeViewModel = function (data) {
    var self = this;

    self.start = ko.observable(moment(data.Start).format('MM/DD/YYYY'));
    self.end = ko.observable(moment(data.End).format('MM/DD/YYYY'));
};

var vm = ko.observable(new ParentViewModel({
    Ranges: [{
        Start: '/Date(1439438400000)/',
        End: '/Date(1439611200000)/'
    },
    {
        Start: '/Date(1439265600000)/',
        End: '/Date(1439352000000)/'
    }]
}));

ko.applyBindings(vm);

window.Test = function()
{
    vm(new ParentViewModel({
        Ranges: [{
            Start: '/Date(1439438400000)/',
            End: '/Date(1435611200000)/'
        }]
    }));
}