JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://jshost.googlecode.com/hg/knockout-1.3pre.js"></script>
<div data-bind="with: BoxA">
    <h3>BoxA</h3>
    <p>Tell BoxB that my button is clicked</p>
    <p><span data-bind="text: Imlistening"></span></p>
 <p> <button data-bind="click: tellThem">Tell BoxB</button></p>    
</div>

<div data-bind="with: BoxB">
    <h3>BoxB</h3>
   <p>Tell BoxA that my button is clicked</p>
   <p><span data-bind="text: Imlistening"></span></p>
   <p> <button data-bind="click: tellThem">Tell BoxA</button></p> 
</div>

CSS

body { font-family: Arial, Helvetica }

JavaScript

function BoxA() {
   this.Imlistening=ko.observable('');
    this.tellThem = function(){
        //tell boxB
    }; 
}

function BoxB() {
   this.Imlistening=ko.observable('asd');
    this.tellThem = function(){
        //tell boxA
    }; 
}

function appViewModel() {
    this.BoxA = new BoxA();
    this.BoxB = new BoxB();
};

ko.applyBindings(new appViewModel());