JSFiddle - React, Tailwind, and code Playground

author(s): Tao Xin

HTML

<script src="https://cdn.jsdelivr.net/gh/vanjs-org/van/public/van-1.2.7.nomodule.min.js"></script>

JavaScript 1.7

const {button, span} = van.tags

const Counter = () => {
  const counter = van.state(0)
  return span(
    "orig ❤️ ", counter, " ",
    button({onclick: () => ++counter.val}, "👍"),
    button({onclick: () => --counter.val}, "👎"),
  )
}

van.add(document.body, Counter())
van.add(document.body, Counter())

document.body.addEventListener("click", function(event) {
  let add;
	switch(event.target.className) {
  	case "up":
    	add = 1;
      break;
    case "down":
    	add = -1;
  }
  if(add) {
    let counter = event.target.parentNode.querySelector(".counter");
  	counter.innerHTML = parseInt(counter.innerHTML) + add;
  }  
});

function addCounter() {
	document.body.insertAdjacentHTML('beforeend', `<div class="wrapper">v2
❤️ <span class="counter">0</span>
<button class="up">👍</button>
<button class="down">👎</button>
</div>`);
}
addCounter();
addCounter();