JSFiddle - React, Tailwind, and code Playground

by mcotton

HTML

<p>Add the values in A1 and B1 into E3</p>
        <table>
           <tbody>
      <tr>
        <td><input type="text" id="a1" value="0"></td>
        <td><input type="text" id="a2"></td>
        <td><input type="text" id="a3"></td>
      </tr>
      <tr>
        <td><input type="text" id="b1" value="0"></td>
        <td><input type="text" id="b2"></td>
        <td><input type="text" id="b3"></td>
      </tr>
      <tr>
        <td><input type="text" id="c1"></td>
        <td><input type="text" id="c2"></td>
        <td><input type="text" id="c3"></td>
      </tr>
      <tr>
        <td><input type="text" id="d1"></td>
        <td><input type="text" id="d2"></td>
        <td><input type="text" id="d3"></td>
      </tr>
      <tr>
        <td><input type="text" id="e1"></td>
        <td><input type="text" id="e2"></td>
        <td><input type="text" id="e3" value="0"></td>
      </tr>
          </tbody>
  </table>

JavaScript

Reactive = function() {

    // { val: '<value>', callback: '<callback>'}
    this.watchList = {}
    
    this.get = function(key) {
        return (this.watchList[key]) ? this.watchList[key] : undefined
    }
    
    this.getValue = function(key) {
        return (this.watchList[key]) ? this.watchList[key].val : undefined
    }
    
    this.set = function(key, val, cb) {
        if(this.watchList[key]) {
            this.watchList[key].val = val
            if(typeof this.watchList[key].callback === 'function') this.watchList[key].callback(key, val)
                } else {
                    this.watchList[key] = { val: val, callback: cb }
                }
    }
    
    this.watch = function(key, cb) {
        if(this.watchList[key]) { 
            this.watchList[key].callback = cb
        } else {
            this.set(key, undefined, cb);
        }
    }
    
    this.unwatch = function(key) {
        return (this.watchList[key]) ? delete this.watchList[key] : underfined
    }

}


$(document).ready(function() {

    window.rx = new Reactive();
    e3 = document.getElementById('e3')
    
    $('input').on('keyup', function(e) { rx.set(this.id, this.value) })
    
    rx.watch('a1', function() { 
        e3.value = parseInt(rx.getValue('a1'), 10) + parseInt(rx.getValue('b1'), 10);
    })
    
    rx.watch('b1', function() { 
        e3.value = parseInt(rx.getValue('a1'), 10) + parseInt(rx.getValue('b1'), 10);
    })
    
});