JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://github.com/xdenser/knockout-component/raw/master/knockout.component.js"></script>
<div data-bind="kc.labeledValue: {caption:'Value #1', value: value1 }"></div>
<div data-bind="kc.labeledValue: {caption:'Value #2', value: value2 }"></div>
















<script id='labeledValueTemplate' type='text/html'> 
<label> <span data-bind='text:caption'></span>: </label>
<!-- ko ifnot: editing -->
   <span data-bind='text: value'></span> 
   <a href='void:' data-bind='click:doEdit'>edit</a>
<!-- /ko -->
<!-- ko if: editing -->
   <input type='text' data-bind='value: _value'> 
   <button data-bind='click:doSave'>Save</button>
   <button data-bind='click:doCancel'>Cancel</button>
<!-- /ko -->
</script>

JavaScript

var outerVM = {
     value1: ko.observable('First Value'),
     value2: ko.observable('Second Value')
  }

createLabeledValueComponent();
ko.applyBindings(outerVM);














function createLabeledValueComponent() {
    function createVM() {
        var vm = {
            caption:ko.observable('Caption'), 
            value: ko.observable('Value'),
            _value: ko.observable(),
            editing: ko.observable(false)
        };

        vm.doSave = function() {
            vm.value(vm._value());
            vm.editing(false);
        };
        vm.doCancel = function() {
            vm.editing(false);
        };
        vm.doEdit = function() {
            vm._value(vm.value());
            vm.editing(true);
        };
        return vm;
    }

    kc.component({
        name: 'labeledValue',
        template: 'labeledValueTemplate',
        create: createVM
    });
}