JSFiddle - React, Tailwind, and code Playground

HTML

<fieldset data-role='controlgroup' id='RadioButton_ko1'   data-corners=false  style='margin-top:0px; ' class=' '>
 <legend for= 'RadioButton_ko1' >Select:</legend>  <input type='radio'  name='RadioButton_ko1_group' id='RadioButton_ko1_1' data-bind='checked: Person.Genes.Gender' value='male'>
  <label for='RadioButton_ko1_1'>Male</label>
  <input type='radio'  name='RadioButton_ko1_group' id='RadioButton_ko1_2' data-bind='checked: Person.Genes.Gender' value='female'>
  <label for='RadioButton_ko1_2'>Female</label>
</fieldset>
    
<fieldset data-role='controlgroup' id='RadioButton_ko2'   data-corners=false  style='margin-top:0px; ' class=' '>
 <legend for= 'RadioButton_ko2' >Select:</legend>  <input type='radio'  name='RadioButton_ko2_group' id='RadioButton_ko1_1' data-bind='checked: Person.Genes.Gender' value='male'>
  <label for='RadioButton_ko1_1'>Male</label>
  <input type='radio'  name='RadioButton_ko1_group' id='RadioButton_ko1_2' data-bind='checked: Person.Genes.Gender' value='female'>
  <label for='RadioButton_ko1_2'>Female</label>
</fieldset>

 <fieldset data-role='controlgroup' id='RadioButton_ko3'   data-corners=false  style='margin-top:0px; ' class=' '>
 <legend for= 'RadioButton_ko3' >Select:</legend>  <input type='radio'  name='RadioButton_k3_group' id='RadioButton_ko1_1' data-bind='checked: Person.Name' value='buckles'>
  <label for='RadioButton_ko1_1'>Buckles</label>
  <input type='radio'  name='RadioButton_ko1_group' id='RadioButton_ko1_2' data-bind='checked: Person.Name' value='petunia'>
  <label for='RadioButton_ko1_2'>Petunia</label>
</fieldset>
        
<fieldset data-role='controlgroup' id='RadioButton_ko4'   data-corners=false  style='margin-top:0px; ' class=' '>
 <legend for= 'RadioButton_ko4' >Select:</legend>  <input type='radio'  name='RadioButton_ko4_group' id='RadioButton_ko1_1' data-bind='checked: Person.Name' value='buckles'>
  <label for='RadioButton_ko1_1'>Buckles</label>
  <input type='radio'  name='RadioButton_ko1_group'...

JavaScript

var vm = {
    Person: {
     Name: ko.observable("buckles"),
        Genes: {
            Gender: ko.observable("male")
        }
    }
};

ko.applyBindings(vm);

alert("The name is: " + vm.Person.Name());
alert("The gender is: " + vm.Person.Genes.Gender());

vm.Person.Name.subscribe(function(newValue) {
    alert("The person's new name is " + newValue);
});

vm.Person.Genes.Gender.subscribe(function(newValue) {
    alert("The person's gender is " + newValue);
});

vm.Person.Name("petunia");
vm.Person.Genes.Gender("female");