Появление блоков вокруг другого блока в схеме на js
 

Делаю блок-схему на JS. Есть блок с кнопкой при наведении, при нажатии на эту кнопку рядом с этим блоком должен плавно появляться другой такой же блок, образуя схему.

Проблема в том, что количество появляющихся блоков неизвестно, и каждый новый блок должен обладать такими же свойствами, что и исходный.

Как сделать, чтобы новые блоки появлялись рядом с исходным блоком в колонку, при клике на кнопку, в неограниченном количестве? Визуализация и код ниже:

var callbutton = document.getElementsByClassName('callbutton');
var newblock = document.getElementsByClassName('newblock');

    callbutton[0].onclick = function() {
    newblock[0].classList.remove('invisible');
}

<div class="container">
  <div class="schema">
    <div class="card" style="--background:#5D9CEC; --text:white;">
      <div class="multi-button">
        <button class="fas fa-heart callbutton"></button>
      </div>
      <div class="cardcontainer"></div>
    </div>
    <div class="card invisible newblock" style="--background:#5D9CEC; --text:white;">
      <div class="multi-button">
        <button class="fas fa-heart"></button>
      </div>
      <div class="cardcontainer "></div>
    </div>
  </div>
</div>