JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://andersmalmgren.github.io/Knockout.BindingConventions/src/Knockout.BindingConventions.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout-validation/2.0.3/knockout.validation.min.js"></script>
<ul data-name="items">
    <li><input data-name="name"></li>
</ul>
<button data-name="add">Add</button> 
<button data-name="save">Save</button>

JavaScript

ViewModel = function() {
    
    this.items = ko.observableArray();
    this.errors = ko.validation.group(this);
    this.canSave = ko.computed(function() {
        return this.errors().length === 0;
    }, this);
    
    this.items([
        new ItemViewModel("John"), 
        new ItemViewModel("Jane")
    ]);       
};

ViewModel.prototype = {
    add: function() {
        this.items.push(new ItemViewModel());
    },
    save: function() {
    }
};
        
ItemViewModel = function(name) {
        this.name = ko.observable(name).extend({ required: true });
};

ko.validation.init({ 
    grouping: { deep: true, observable: true, live: true }, 
    messagesOnModified: false
});
ko.applyBindings(new ViewModel());