const {html} = htl

function Counter (start = 0) {
  let value = start;
  let counter =  html`<span>${value}</span>`;
  let button = html`<button onclick=${function () {
    counter.innerText = ++value;
    if (value > 9) {
       this.style.display = "none"
       counter.innerText = "Limit reached"
    }
  }}>INC</button>`
  function view () {
    return html`
      <div style="margin-bottom:10px">
        ${counter}
        ${button}
      </div>`
  }
  return view()
}

const multipleCounters =  
  [...Array(50)]
    .map(() => Math.floor(Math.random() * 10 ))
    .map(Counter)

function App () {
  return html`<div>
    <h1>Muliple statefull counters</h1>
    ${multipleCounters}
  </div>`
}

document.body.append(App())