<button>Add</button>
<div class="template"></div>
<div class="charts"></div>
<div class="log"></div>

.template {
  display: none;
}

.chart {
  width: 100px;
  background-color: #F0F0F0;
  margin: 5px;
  padding: 5px;
  text-align: center;
  cursor: pointer;
}

.log {
  height: 50px;
  width: 100px;
  overflow: scroll;
  white-space: pre-wrap;
  padding: 5px;
}

document.querySelector('button').addEventListener(
  'click',
  () => {
    const newDiv = document.querySelector('.template').cloneNode();
    newDiv.classList.remove('template');
    newDiv.classList.add('chart');
    newDiv.innerText = document.querySelectorAll('.chart').length;
    document.querySelector('.charts').appendChild(newDiv);
  },
);

document.querySelector('.charts').addEventListener(
  'click',
  (e) => {
    const el = e.target.closest('.chart');
    if (el === null) {
      return;
    }
    const num = el.innerText;
    const log =     document.querySelector('.log');
    log.insertAdjacentText('beforeend', `${num} pressed\n`);
    log.scrollTo(0, log.scrollHeight);
  }
)