JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="modal-subject-list" data-bind="foreach: filteredSubjects">
    <li data-bind="click: hasBeenAdded() ? null : $parent.pickSubject, text: Name">
    </li>
</ul>
<ul data-bind="foreach: added">
    <li data-bind="text: Name"></li>
</ul>

JavaScript

function thing(name) {
    var self=this;
    self.Name = ko.observable(name);
    self.hasBeenAdded = ko.observable(false);    
}

function vm () {
    var self=this;
    self.filteredSubjects = ko.observableArray([
        new thing('bill'),
        new thing('pat'),
        new thing('john')
        ]);
    self.added = ko.observableArray();
    self.pickSubject = function (subject) {
        console.log('Added ', subject);
        subject.hasBeenAdded(true);
        self.added.push(subject);
    };
}

ko.applyBindings(new vm());