JSFiddle - React, Tailwind, and code Playground

by ZenMaster

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.js"></script>
<div id="1">    
    <ul data-bind="foreach: items">
        <li>
             <input type="text" data-bind="value: name">       
        </li>
    </ul>
</div>
    
<div id="2">    
    <ul data-bind="foreach: items">
        <li>
             <input type="text" data-bind="value: name">       
        </li>
    </ul>
</div>

JavaScript

var data = {
    items: [{name: 'name 1'}, {name: 'name 2'}, {name: 'name 3'}]
};

var viewModel = ko.mapping.fromJS(data, {
    items: {
        key: function(item) {
            return item.name;
        },
        create: function(options) {
            return ko.observable(options.data);
        }        
    }
});

var div1 = document.getElementById('1');
var div2 = document.getElementById('2');

ko.applyBindings(viewModel, div1);
ko.applyBindings(viewModel, div2);