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

[GerardJsov]

Делаю блок-схему на 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>

.invisible {
  display: none!important;
}

.schema {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}

body .card {
  --background:#FFFFFF;
  --text:black;
  position: relative;
  height: 6rem;
  width: 10%;
  min-width: 200px;
  box-shadow: 0 0 2rem -1rem rgba(0, 0, 0, 0.05);
  display: inline-block;
}

body .card .multi-button {
  z-index: 0;
  position: absolute;
  top: 1.25rem;
  left: 1.25rem;
  border-radius: 100%;
  width: 0rem;
  height: 0rem;
  transform: translate(-50%, -50%);
  transition: 0.25s cubic-bezier(0.25, 0, 0, 1);
}

body .card .multi-button button {
  display: grid;
  place-items: center;
  position: absolute;
  width: 2rem;
  height: 2rem;
  border: none;
  border-radius: 100%;
  background: var(--background);
  color: var(--text);
  transform: translate(-50%, -50%);
  cursor: pointer;
  transition: 0.25s cubic-bezier(0.25, 0, 0, 1);
  box-shadow: 0 0 0rem -0.25rem var(--background);
}

body .card .multi-button button:hover {
  background: var(--text);
  color: var(--background);
  box-shadow: 0 0 1rem -0.25rem var(--background);
}

body .card .multi-button button:first-child:nth-last-child(1):nth-child(1), body .card .multi-button button:first-child:nth-last-child(1) ~ *:nth-child(1) {
  left: 25%;
  top: 25%;
}

body .card .multi-button button:first-child:nth-last-child(2):nth-child(1), body .card .multi-button button:first-child:nth-last-child(2) ~ *:nth-child(1) {
  left: 37.5%;
  top: 18.75%;
}

body .card .multi-button button:first-child:nth-last-child(2):nth-child(2), body .card .multi-button button:first-child:nth-last-child(2) ~ *:nth-child(2) {
  left: 18.75%;
  top: 37.5%;
}

body .card .multi-button button:first-child:nth-last-child(3):nth-child(1), body .card .multi-button button:first-child:nth-last-child(3) ~ *:nth-child(1) {
  left: 50%;
  top: 15.625%;
}

body .card .multi-button button:first-child:nth-last-child(3):nth-child(2), body .card .multi-button button:first-child:nth-last-child(3) ~ *:nth-child(2) {
  left: 25%;
  top: 25%;
}

body .card .multi-button button:first-child:nth-last-child(3):nth-child(3), body .card .multi-button button:first-child:nth-last-child(3) ~ *:nth-child(3) {
  left: 15.625%;
  top: 50%;
}

body .card .multi-button button:first-child:nth-last-child(4):nth-child(1), body .card .multi-button button:first-child:nth-last-child(4) ~ *:nth-child(1) {
  left: 62.5%;
  top: 18.75%;
}

body .card .multi-button button:first-child:nth-last-child(4):nth-child(2), body .card .multi-button button:first-child:nth-last-child(4) ~ *:nth-child(2) {
  left: 37.5%;
  top: 18.75%;
}

body .card .multi-button button:first-child:nth-last-child(4):nth-child(3), body .card .multi-button button:first-child:nth-last-child(4) ~ *:nth-child(3) {
  left: 18.75%;
  top: 37.5%;
}

body .card .multi-button button:first-child:nth-last-child(4):nth-child(4), body .card .multi-button button:first-child:nth-last-child(4) ~ *:nth-child(4) {
  left: 18.75%;
  top: 62.5%;
}

body .card .cardcontainer {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 1rem;
  background: var(--background);
  color: var(--text);
}

body .card:hover .multi-button, body .card .multi-button:focus-within {
  width: 10rem;
  height: 10rem;
}