JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <select multiple="true" height="12" data-bind="options: list, optionsText: 'firstName', value: selectedItem"></select>
</div>
<div class="col-md-8" data-bind="with: selectedItem">
    <p data-bind="text: firstName">First Name</p>
    <p data-bind="text: lastName">Last Name</p>
    <p data-bind="text: address">Address</p>
</div>
<button data-bind="click: addAddress">New</button>
<button data-bind="click: removeAddress">Delete</button>

JavaScript

var initialData = [{
    firstName: "Jimmy",
    lastName: "Jimbo",
    address: "111 Jimmy's Street, Jimtown"
}, {
    firstName: "Don",
    lastName: "Mob boss",
    address: "222 Mafia Street, Jimtown"
}];

var AddressModel = function (list) {
    var self = this;

    self.selectedItem = ko.observable(null);

    self.list = ko.observableArray(ko.utils.arrayMap(list, function (item) {
        return {
            firstName: item.firstName,
            lastName: item.lastName,
            address: item.address
        };
    }));

    self.addAddress = function () {
        self.list.push({
            firstName: "",
            lastName: "",
            address: ""
        });
    };

    self.removeAddress = function () {
        self.list.remove(function (item) {
            return item.firstName == self.selectedItem.firstName;
        });
    };
};

ko.applyBindings(new AddressModel(initialData));