JSFiddle - React, Tailwind, and code Playground

HTML

<h2>Edit Person Here</h2>
<div data-bind="with: EditPerson">
    <h3 data-bind="html: Name"></h3>
    <!--Uncomment line below to generate binding error. -->
    <select data-bind="options:$parent.IceCreams, optionsText: 'Name', optionsValue: 'Id'"></select>
</div>
<h2>List of People</h2>
<div data-bind="foreach: People">
    <div data-bind="click: $parent.SelectPerson">
        <h3 data-bind="html: Name"></h3>
        Favorite IceCream: <span data-bind="html: FavoriteIceCream().Name"></span>
    </div>
</div>

CSS

div{
    border: 1px solid black;
    margin:0.5em
}
h2{
    font-size: 2em;
}
h3{
    font-size: 1.3em;
}

JavaScript

function ViewModel() {
     var self = this;
    
    self.IceCreams = ko.observableArray([
            new IceCream(1, "Chocolate"),
            new IceCream(2, "Vanilla"),
            new IceCream(3, "Mint")
        ]);
    self.EditPerson = ko.observable(new Person("", self.IceCreams()[0]));
    self.People = ko.observableArray([
            new Person("Joe", self.IceCreams()[2]),
            new Person("Sue", self.IceCreams()[0]),
            new Person("Carl", self.IceCreams()[1])
        ]);
    self.SelectPerson = function(person){
            self.EditPerson(person);
    }
}

function Person(Name, FavoriteIceCream){
    var self = this;
    self.Name = ko.observable(Name);
    self.FavoriteIceCream = ko.observable(FavoriteIceCream);
}

function IceCream(Id, Name){
    var self = this;
    self.Id = Id;
    self.Name = Name;
}

ko.applyBindings(new ViewModel());