JSFiddle - React, Tailwind, and code Playground

HTML

<form>

    <div data-bind="foreach: retrievedUsers" >
    <div>
        <label data-bind="attr:{for:$index}">
        <input type="radio" name="people2" data-bind="attr: {id: $index,value: age}, checked: $root.selected" />
        <span data-bind="text: name"></span>
        </label>
    </div>    
</div>
</form>
    <div>
    The selected person will be 
    <span data-bind="text: SelectedPersonAgeNextYear"></span>
    years old in the upcoming year.
</div>
    <button data-bind="click: getUsers">get users</button>

JavaScript

var ViewModel = function() {

  var self = this;
  // an array of retrieved user objects
  self.retrievedUsers = ko.observable([]);

  self.getUsers = function() {
      self.retrievedUsers([{'name': 'Johnny', 'age': 20}, {'name': 'Jenny', 'age': 21}]);
  };
    
    self.checkUser=function(val){
        self.SelectedPersonAgeNextYear(val.age+1);
    };
    
    self.selected=ko.observable();
    self.SelectedPersonAgeNextYear=ko.computed(function(){
        return parseInt(self.selected(),10)+1;
    });
};

ko.applyBindings(new ViewModel());