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

Здравствуйте, есть задумка в одностраничниках выводить через тег <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 й день уже этой идеей болею... Очень хочу чтобы заработало... А не получается, совсем запутался...

--

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