A Pen by Calvin Metcalf.

index.html

<ul>
  <li class='waiter'><span id="value1">0</span><button id="button1">increment</button>
  <li class='waiter'><span id="value2">0</span><button id="button2">increment</button>
    <li class='waiter'><span id="value3">0</span><button id="button3">increment</button>
      <li class='waiter'><span id="value4">0</span><button id="button4">incriment</button>
</ul>

script.js

var db = new PouchDB('local');

var values = {};
function set(key, value) {
  var thing = document.getElementById('value' + key);
  if (!thing) {
    return;
  }
  thing.innerHTML = value;
}
db.changes({
  live: true,
  include_docs: true
}).on('change', function (ch) {
  set(ch.id, ch.doc.value);
 });
$('button').on('click', function(e) {
  incriment(e.target.id.slice(-1))
});
function incriment(id) {
  return db.get(id).then(function (doc) {
    if (typeof doc.value === 'string') {
      doc.value = String(doc.value);
    }
    doc.value++;
    return db.put(doc);
  }, function () {
    return db.put({
      _id: id,
      value: 1  
    }).catch(function () {
       return incriment(id);
    });
  });
}

style.css

body{
  background:
radial-gradient(circle at 50% 100%, rgb(0,84,166) 30%, transparent 30%) 0px -10px,
radial-gradient(circle at 50% 0%, rgb(0,84,166) 30%, transparent 30%) 50px -10px,
radial-gradient(circle at 50% 50%, rgb(0,114,188) 50%, transparent 30%) 0px -50px,
radial-gradient(circle at 50% 50%, rgb(0,114,188) 50%, transparent 30%) 50px 10px









;

background-color: darkgreen;
background-size:100px 180px;
  
}

veyFf.markdown

veyFf

Forked from Juan Carlos Rodriguez Mendez's Pen vlwHd.

A Pen by Calvin Metcalf on CodePen.

License.