JSFiddle - React, Tailwind, and code Playground

HTML

<ul data-bind="foreach: people">
<li data-bind="text:name, click:$parent.selectPerson"></li>
</ul>

 <button class="btn" data-bind="click: SaveDetail">Save</button>

<div data-bind="with:selectedPerson">
<span data-bind="text:id"></span>
<input data-bind="value:name"/>
    <input data-bind="value:country"/>






    </div>

JavaScript

var Person = function(id, name, country) {
    var self = this;
    self.id = ko.observable(id);
    self.name = ko.observable(name);
    self.country = ko.observable(country);

    return self;
};

var vm = (function() {
    var people = ko.observableArray(),
        selectedPerson = ko.observable();

    getPeople = function() {
        people.push(new Person(1, 'John', 'USA'));
        people.push(new Person(2, 'Mike', 'UK'));
        people.push(new Person(3, 'Dan', 'AUS'));
    }, selectPerson = function(p) {
        selectedPerson(p);

    };

    this.SaveDetail = function() {
        console.log(people());    
        ko.utils.arrayForEach(people(), function(item){
            delete item["country"];                 
        });
        console.log(people());    
    };

    getPeople();

    return {
        people: people,
        selectedPerson: selectedPerson,
        selectPerson: selectPerson
    };
})();


ko.applyBindings(vm);