Question

Here is a jsFiddle code.

I have 6 input texts split into two blocks as 3+3.

The first three input texts work as they supposed to work: they display the same text even if a user types something.

I want the same behavior for another three input texts, so each block is independent. Unfortunately, the second block doesn’t work at all.
What am I missing?

HTML:

<div>
    <!--the first block-->
    <input type="text" data-bind="value:Name, valueUpdate:'afterkeydown'"><br>
    <input type="text" data-bind="value:Name, valueUpdate:'afterkeydown'"><br>
    <input type="text" data-bind="value:Name, valueUpdate:'afterkeydown'">
<br><br><br>
    <!--the second block-->
    <input type="text" data-bind="value:Name2, valueUpdate:'afterkeydown'"><br>
    <input type="text" data-bind="value:Name2, valueUpdate:'afterkeydown'"><br>
    <input type="text" data-bind="value:Name2, valueUpdate:'afterkeydown'">        
</div>

JS:

var value="Type here...";
var viewModel={Name:ko.observable(value)};
ko.applyBindings(viewModel);


var value2="Hello John2";
var viewModel2={Name2:ko.observable(value2)};
ko.applyBindings(viewModel2);

Answer 1

You are structuring your viewmodels in the wrong way.

You need one viewmodel with the two properties on it:

var value="Type here...";
var value2="Hello John2";
var viewModel = {
        Name: ko.observable(value),
        Name2: ko.observable(value2)
    };
ko.applyBindings(viewModel);

You can read more about viewmodels and how to use them in the documentation.

Demo: http://jsfiddle.net/d9VkK/