JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdn.kendostatic.com/2012.1.322/js/kendo.web.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.default.min.css">
<div id="practiceSection">
    <div id="phoneNumber">
        <h4>Phone Number</h4>
        <span>Display Value:</span>
        <input id="displayPhoneNumber" data-bind="value: DisplayValue"/><br/>
        <span>Old Value:</span>
        <input id="oldPhoneNumber" data-bind="value: OldValue"/><br/>
        <span>New Value:</span>
        <input id="newPhoneNumber" data-bind="value: NewValue"/><br/>
    </div>
</div>

CSS

span {
    display: inline-block;
    width: 6em;
}

h4 {
    padding-top: 5px;
    font-weight:bold;
}

JavaScript

String.IsNullOrEmpty = function(value) {
    var isNullOrEmpty = true;
    if (value) {
        if (typeof (value) == 'string') {
            if (value.length > 0)
                isNullOrEmpty = false;
        }
    }
    return isNullOrEmpty;
}
    
function FieldBlock(oldValue, newValue) {
    this.OldValue = oldValue;
    this.NewValue = newValue;

    this.DisplayValue = function() {
        var newValue = this.get("NewValue");
        if (String.IsNullOrEmpty(newValue))
            return this.get("OldValue");
        
        return newValue;
    };
}
    
kendo.bind($("#phoneNumber"), kendo.observable(new FieldBlock("111-111-1111", null)));