JSFiddle - React, Tailwind, and code Playground

by Kiran Parab

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<h2>Application</h2>

<table>
    <thead>
        <tr>
            <th>File name</th>
        </tr>
    </thead>
    <tbody data-bind="foreach:rows">
        <tr>
            <td>
                <input data-bind="value: name" />
            </td>
            <td>
                <select data-bind="options: $root.types, value: hasFile"></select>
                <br/> <span data-bind="visible: isType('Yes')">
                    <input type = "file"/> 
                </span>
 <span data-bind="visible: isType('No')"></span>

            </td>
            <td><a href="#" data-bind="click: $root.removeRow">Remove</a>

            </td>
        </tr>
    </tbody>
</table>
<button data-bind="click:addRow">Add Row</button>

JavaScript

function InsertRow(name, hasFile) {
    var self = this;
    self.name = name;
    self.hasFile = ko.observable(hasFile);
    
    self.isType = function (hasFile) {
        return hasFile === this.hasFile();
    };
}

function AppViewModel() {
    var self = this;

    // Editable data
    self.rows = ko.observableArray([
    new InsertRow("", 'No')]);
    self.addRow = function () {
        self.rows.push(new InsertRow("", 'No'));
    }
    self.removeRow = function (row) {
        self.rows.remove(row)
    };

    self.types = ko.observableArray(["Yes", "No"]);
    self.type = ko.observable("No");
    //self.isType = function (type) {
    //    return type === this.type();
    //};

}


ko.applyBindings(new AppViewModel());