JSFiddle - React, Tailwind, and code Playground
HTML
<div data-bind="foreach:{ data: organizations, as: 'organization' } " class="accordion " id="accordionOrg">
<table>
<thead>
<tr>
<th>Billing Address</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<select data-bind="options: organizationAddresses, optionsText: 'address', optionsValue: 'organizationAddressId', value: organization.selectedBillingAddress, optionsCaption: 'Choose one'"></select>
</td>
<td>
<button data-bind="click: $root.addOrg(organization)" class="btn btn-small btn-block">Add</button>
</td>
</tr>
</tbody>
</table>
</div>
JavaScript
var organizations = ko.observableArray();
var addresses = [{
address: "Address Text 1",
organizationAddressId: "Address Value 1"
}, {
address: "Address Text 2",
organizationAddressId: "Address Value 2"
}];
var vm = {
organizations: ko.observableArray([{
OrganizationId: 1,
Name: "Org Name 1",
SapId: "SapId1",
UserId: "UserId1",
Deleted: false,
selectedBillingAddress: ko.observable(),
organizationAddresses: addresses
}]),
activate: ko.observable(),
selectedAddress: ko.observable()
};
vm.addOrg = function (organization) {
console.log(organization.selectedBillingAddress())
}
ko.applyBindings(vm);