Knockout binding using same objects in multiple times in same page - mvvm

Question

ViewModel :
var address = new function {
var self = this;
self.add1 = ko.observable();
self.add2 = ko.observable();
self.city = ko.observable();
self.state = ko.observable();
self.postal = ko.observable();
},
person = new funcion {
var self = this;
self.firstName = ko.observable();
self.lastName = ko.observable();
self.address = ko.observable(address);
},
company = new function {
var self = this;
self.salesPerson = ko.observable(person);
self.shippingAddress = ko.observable(address);
self.billingAddress = ko.observable(address);
};
View:
<div>
<h3>Shipping Address</h3>
<span class="">Address1: </span><input type="text" data-bind="value:company.shippingAddress.add1">
<span class="">Address2: </span><input type="text" data-bind="value:company.shippingAddress.add2">
<span class="">City: </span><input type="text" data-bind="value:company.shippingAddress.city">
<span class="">State: </span><input type="text" data-bind="value:company.shippingAddress.state">
<span class="">Postal: </span><input type="text" data-bind="value:company.shippingAddress.postal">
</div>
<div>
<h3>Billing Address</h3>
<span class="">Address1: </span><input type="text" data-bind="value:company.billingAddress.add1">
<span class="">Address2: </span><input type="text" data-bind="value:company.billingAddress.add2">
<span class="">City: </span><input type="text" data-bind="value:company.billingAddress.city">
<span class="">State: </span><input type="text" data-bind="value:company.billingAddress.state">
<span class="">Postal: </span><input type="text" data-bind="value:company.billingAddress.postal">
</div>
Problem :
In my view if I change address in one place it's changing everywhere. I need to use observable because I'm also displaying those details in the same page.
Any help please?

Answer 1

This doesn't make any sense - a binding is two-ways for a reason, why would you want to bind to a property but not share it? If you want each individual to have different information just use a different observable to bind to...
function address () {
var self = this;
self.add1 = ko.observable();
self.add2 = ko.observable();
self.city = ko.observable();
self.state = ko.observable();
self.postal = ko.observable();
},
company = new function {
var self = this;
self.salesPerson = ko.observable(person);
self.shippingAddress = ko.observable(new address());
self.billingAddress = ko.observable(new address());
};
In this situation I am using an anonymous function instead of a constructor. The constructor will be evaluated only once and be bound to the same object. The anonymous function will be initialized twice separately.