JSFiddle - React, Tailwind, and code Playground

by alexdresko

HTML

<div data-bind="foreach: people">
    <p>status:
        <select data-bind="options: statuses, value: status"></select>
    </p>
</div>
<a href="#" data-bind="click:add">Add</a>

JavaScript

var myViewModel = {
    people: ko.observableArray([]),
    add: function () {
        var item = {
            status: ko.observable(''),
            statuses: ko.observableArray([])
        };
     

        this.people.push(item);

        item.status.subscribe(function (value) {
            fixSelections(myViewModel.people());
        });
    }
};

myViewModel.people.subscribe(function (values) {
    fixSelections(values);
});

function fixSelections(values) {
    var hasSpouse = false;
    values.forEach(function (thing) {

        if (thing.status() == "spouse") {
            hasSpouse = true;
        }
    });

    values.forEach(function (thing, index) {
        if (index == 0) {
            if (values.length == 1) {
                thing.statuses.push('subscriber');
            }
        } else {
            AddSingleValue(thing, 'Select one');
            var spouseIndex = thing.statuses.indexOf("spouse");
            if (!hasSpouse && spouseIndex < 0) {
                thing.statuses.push('spouse');
            }

            if (hasSpouse && thing.status() != "spouse" && spouseIndex > -1) {
                thing.statuses.remove("spouse");
            }

            AddSingleValue(thing, 'Child');
        }
       
    })
}

function AddSingleValue(thing, value) {
    var itemIndex = thing.statuses.indexOf(value);
    if (itemIndex < 0) {
        thing.statuses.push(value);
    }
}



ko.applyBindings(myViewModel);