JSFiddle - React, Tailwind, and code Playground

by badsyntax

HTML

<span title="sales comment" data-bind="attr: { id: 'sales-'+year() }" style="cursor :pointer;">
 Add comment                                                 
</span> <br />
<div data-bind="attr: { id: 'sales-'+year()+'_content'  }" style="display : none;">
 <textarea data-bind="value: salesComment, valueUpdate: 'keydown'"> </textarea>
</div>

<button id="check">Check observable value</button>

JavaScript

var FinancialYearViewModel = function(data, parent) {
    var self = this;
    self.year = ko.observable(data.year);
    self.salesComment = ko.observable(data.salesComment);
};  
var data = {"year": "2012", "salesComment": "sales comment"}
var vm = new FinancialYearViewModel(data);
ko.applyBindings(vm);

document.getElementById('sales-2012').onmouseover = function() {
  document.getElementById('sales-2012_content').style.display = 'block';  
};
document.getElementById('sales-2012').onmouseoff = function() {
  document.getElementById('sales-2012_content').style.display = 'none';  
};
document.getElementById('check').onclick = function() {
  alert(vm.salesComment());
};