JSFiddle - React, Tailwind, and code Playground

by Zhelyakea

HTML

<body>
<button id="1button" class="button">button 1</button>
<button id="2button" class="button">button 2</button>
</body>

JavaScript

function log( change ) {
  //console.log( "1: ", change.name );
  //console.log( "2: ", change.type );
    if(change.name == "cost"&&change.type == "update"){
        //console.log(arr[0])
        //console.log(arr[1].cost)
        console.log("1. update cost for id: "+ change.object.id)
        console.log("2. old value: "+ change.oldValue)
        console.log("3. new value: "+ change.object.cost)
    }
}
var o = {
    data: [
        { id: "1", cost: 100},
        { id: "2", cost: 200}
    ]
};
for(i=0;i<o.data.length;i++){
    // Specify |o| as an observable object
    Object.observe(o.data[i], function( changes ) {
      changes.forEach( log );
    });
}
    
document.getElementById('1button').addEventListener("click", plus, false);

function plus(){
     o.data[0].cost = o.data[0].cost*2
}