title: How to assign a value to a dynamic text input
body: <p><strong>Question:</strong> 
  I have a custom numeric keyboard and a dynamic table including a QTY input. My question is what would be the best approach in order to assign the value of touched number to the random QTY input that had focus before touching any number?  </p>
  
  <p><strong>Example</strong> <a href="https://jsfiddle.net/kyr6w2x3/166/" rel="nofollow noreferrer">https://jsfiddle.net/kyr6w2x3/166/</a></p>
  
  <p>HTML:</p>
  
  <pre><code>  &lt;table class="table "&gt;
        &lt;thead&gt;
            &lt;tr&gt;
                &lt;th class="text-center"&gt;Item&lt;/th&gt;
                &lt;th class="text-center"&gt;Qty&lt;/th&gt;
            &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody data-bind="foreach:ListOfScannedItems"&gt;
            &lt;tr&gt;
                &lt;td&gt;&lt;input type="text" class="form-control" placeholder="" data-bind="textInput:Item"&gt;&lt;/td&gt;
                &lt;td&gt;&lt;input type="number" class="form-control" data-bind="textInput:Quantity" /&gt;&lt;/td&gt;
            &lt;/tr&gt;
        &lt;/tbody&gt;
   &lt;/table&gt;
  
   &lt;input type="text" class="form-control margin-top-5" placeholder="type something" data-bind="textInput:scanItemInput"&gt;
   &lt;input type="button" data-bind="click:AddItem" value="Add"&gt;
  
  &lt;ul id="keyboard"&gt;
      &lt;li class="symbol" data-bind="click: function() {keybordClicked(1)}"&gt;&lt;span class="off"&gt;1&lt;/span&gt;&lt;/li&gt;
      &lt;li class="symbol" data-bind="click: function() {keybordClicked(2)}"&gt;&lt;span class="off"&gt;2&lt;/span&gt;&lt;/li&gt;
      &lt;li class="symbol" data-bind="click: function() {keybordClicked(3)}"&gt;&lt;span class="off"&gt;3&lt;/span&gt;&lt;/li&gt;
      &lt;li class="symbol" data-bind="click: function() {keybordClicked(4)}"&gt;&lt;span class="off"&gt;4&lt;/span&gt;&lt;/li&gt;
      &lt;li class="symbol" data-bind="click: function() {keybordClicked(5)}"&gt;&lt;span class="off"&gt;5&lt;/span&gt;&lt;/li&gt;
      &lt;li class="symbol" data-bind="click: function() {keybordClicked(6)}"&gt;&lt;span class="off"&gt;6&lt;/span&gt;&lt;/li&gt;
      &lt;li class="symbol" data-bind="click: function() {keybordClicked(7)}"&gt;&lt;span class="off"&gt;7&lt;/span&gt;&lt;/li&gt;
      &lt;li class="symbol" data-bind="click: function() {keybordClicked(8)}"&gt;&lt;span class="off"&gt;8&lt;/span&gt;&lt;/li&gt;
      &lt;li class="symbol" data-bind="click: function() {keybordClicked(9)}"&gt;&lt;span class="off"&gt;9&lt;/span&gt;&lt;/li&gt;
      &lt;li class="symbol" data-bind="click: function() {keybordClicked(0)}"&gt;&lt;span class="off"&gt;0&lt;/span&gt;&lt;/li&gt;
      &lt;li class="delete lastitem" data-bind="click: function() {keybordClicked(-1)}"&gt;⌫&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>VM:</p>
  
  <pre><code> var appVM = function(){
      var self = this;
     self.scanItemInput = ko.observable();
     self.ListOfScannedItems = ko.observableArray([]);
     self.AddItem = function () {
        self.ListOfScannedItems.push(new ScannedItemVM({ Item: self.scanItemInput()}));
        self.scanItemInput("");
      }
      self.keybordClicked = function(value){
       console.log(value);
         // how to assign this value to the input that has focused before pressing on any number 
      }
   }
  
   var ScannedItemVM = function (data) {
      var self = this;
      self.Item = ko.observable(data.Item);
      self.Quantity = ko.observable("");
  }
  var vm = new appVM();
  ko.applyBindings(vm);
  </code></pre>