Knockout.js: Function being called on unassigned binding -

it's first post. i'm pretty new knockout , trying basic example. in below eg: trying change only labels upper case labels(last name , full name) not input text box. so, i've assigned value of text box hidden field , there on manipulating hidden field. but, @ end input modified upper case. appreciated!!

my view:

    <p>first name: <input data-bind="value: firstname" /></p>     <p>last name: <input data-bind="value: lastname" /></p>     <input style="display:none;" data-bind="value: hdnlastname" />     <p>first name: <strong data-bind="text: firstname">todo</strong></p>     <p>last name: <strong data-bind="text: hdnlastname">todo</strong></p>     <p>full name: <strong data-bind="text: firsthdnlastname"></strong></p>      <button data-bind="click: capitalizehdnlastname">click me!!</button> 

view model:

    function appviewmodel() {     this.firstname = ko.observable("gireesh");     this.lastname = ko.observable("");      this.hdnlastname = this.lastname;      this.firsthdnlastname = ko.computed(function(){     return this.firstname() + " " + this.hdnlastname();     },this);      this.capitalizehdnlastname = function(){     var tempvalue = this.hdnlastname();     return this.hdnlastname(tempvalue.touppercase());};     } 

currently you're setting hdnlastname = lastname both variables pointing same thing. can't update 1 without updating other. fix need make hdnlastname own observable

this.hdnlastname = ko.observable(""); 

but need keep synchronized changes lastname

this.lastname.subscribe(function(value){      this.hdnlastname(value); }, this); 

example:

function appviewmodel() {      this.firstname = ko.observable("gireesh");      this.lastname = ko.observable("");        this.hdnlastname = ko.observable("");      this.lastname.subscribe(function(value){           this.hdnlastname(value);      }, this);        this.firsthdnlastname = ko.computed(function(){        return this.firstname() + " " + this.hdnlastname();      },this);        this.capitalizehdnlastname = function(){        var tempvalue = this.hdnlastname();        this.hdnlastname(tempvalue.touppercase());      };  }      ko.applybindings(new appviewmodel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>    <p>first name: <input data-bind="value: firstname" /></p>      <p>last name: <input data-bind="value: lastname" /></p>      <input style="display:none;" data-bind="value: hdnlastname" />      <p>first name: <strong data-bind="text: firstname">todo</strong></p>      <p>last name: <strong data-bind="text: hdnlastname">todo</strong></p>      <p>full name: <strong data-bind="text: firsthdnlastname"></strong></p>       <button data-bind="click: capitalizehdnlastname">click me!!</button>