Тег <templates> и DOM клонирование Card и вывод параметров

[MazleTop]

Здравствуйте, есть задумка в одностраничниках выводить через тег <template> стандартные Card из bootstrap4, параметры заполнять в js файле, где однотипная разметка будет клонироваться, а данные ТОЧЕЧНО обновляться, вот что вышло:

<div class="setup hidden">
    <div class="setup-similar">
      <div class="setup-similar-list"></div>
    </div>
  </div>


  <template id="similar-wizard-template" style="display: none">
    <div class="col">
      <div class="card">

        <a class="img url" href="<!-- URL1 всплывашка -->">
          <img class="imgT alt" src="<!-- # -->" alt="<!--ALT-->">
        </a>
        
        <div class="card-body">
          <a class="url2" href="<!-- URL2 например модальное окно -->">
            <h3 class="title">Title</h3>
          </a>
          <p class="text"><!--text--></p>
        </div>

      </div>
    </div>
  </template>

js

var userDialog = document.querySelector( '.setup' );
userDialog.classList.remove( 'hidden' );

var similarListElement = document.querySelector( '.setup-similar-list' );

var similarWizardTemplate = document.querySelector( '#similar-wizard-template' )

.content
.querySelector( '.col' );

for (var i = 0; i < 4; i++) {
  var wizardElement = similarWizardTemplate.cloneNode(true);

  similarListElement.appendChild(wizardElement);
}


var card = [
{
  title: 'Заголовок 1',
  text: 'Текс 1',
  img: 'img/1.jpg',
  imgT: 'img/1t.jpg',
  alt: 'Текст 1',
  url: '#',
  url2: '#2'
},
{
  title: 'Заголовок 2',
  text: 'Текс 2',
  img: 'img/2.jpg',
  imgT: 'img/2t.jpg',
  alt: 'Текст 2',
  url: '#',
  url2: '#2'
},
{
  title: 'Заголовок 3',
  text: 'Текс 3',
  img: 'img/3.jpg',
  imgT: 'img/3t.jpg',
  alt: 'Текст 3',
  url: '#',
  url2: '#2'
},
{
  title: 'Заголовок 4',
  text: 'Текс 4',
  img: 'img/4.jpg',
  imgT: 'img/4t.jpg',
  alt: 'Текст 4',
  url: '#',
  url2: '#2'
}
];

Что-то я нагородил... я понимаю... знаний не хватает, ПОМОГИТЕ ПОЖАЛУЙСТА сделать эту идею рабочей...

Очень мало информации по тегу <template> , я так и не понял зачем ещё дописывать:

<div class="setup hidden">
    <div class="setup-similar">
      <div class="setup-similar-list"></div>
    </div>
  </div>

С JavaScript я только учу...тяжко очень, но учу.

4 й день уже этой идеей болею... Очень хочу чтобы заработало... А не получается, совсем запутался...

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