JSFiddle - React, Tailwind, and code Playground

by Jeroen Heijmans

HTML

<!-- ko foreach: myForms -->
<form data-bind= "attr: { 'id': 'form-' + ($index() + 1) }, submit: $root.updateStore">
    Form with id '<span data-bind="text: 'form-' + ($index() + 1)"></span>'
    <input type='text' data-bind="value: someValue" /> <input type='submit' />
</form>
<hr />
<!-- /ko -->

JavaScript

function form(item) {
    var self = this;
    self.someValue = ko.observable("Test " +  item);
}

function vm() {
    var self = this;
    self.myForms = ko.observableArray([new form("A"), new form("B")]);
    self.updateStore = function(formElement) { alert('submitting ' + formElement.id); };
}

ko.applyBindings(new vm());