Проблема с добавлением значений JS obj в div

Question

У меня есть несколько div, которые были клонированы с использованием template. Каждый div содержит значение объекта JS, и нажатие на любой из div открывает модальное окно.Я добавил значение obj (называемое "Заголовок категории") и в модалы, но столкнулся с проблемой:

1. Вот что заКонтейнеры div выглядят так.

2. Если я нажму на первый контейнер (называемый «Животные»), он будет отображаться как undefined в консоли.

3. Если я нажимаю на следующий контейнер («Цвета»), я вижу данные о животных.В консоли также появляются «Животные».

Исходя из приведенного ниже кода, почему первое значение объекта Animals не добавляется в первый div?Если бы мне пришлось угадать, что это как-то связано с 0, и если так, то я не знаю почему.

JS-фрагмент:

// irrelevant code
]).then(axios.spread((cat, lib, admn) => {
     _categories = cat.data.d.results;

     this.loadCategories();

loadCategories(){

    let categs = _categories;

    let $host = $("#host");
      for (var i = 0; i < categs.length; i++) {
          let $template = $("#template").clone();
          $template.find(".cat-box > .cat-title").text(categs[i].Title);
          $("#cat-box-id").attr("data-category", categs[i].Title)
          $host.append($template.html());
          console.log(categs[i].Title)
      }

$("#modal-id").on("show.bs.modal", function(evt) {

   $(".modal-title").attr("data-category", categs);
        let test = $(evt.relatedTarget).data("category");

        $(".modal-title").empty();
        $(".modal-title").text(test);

        console.log(test); // ----- clicking on first div shows 'undefined'
})

HTML-фрагмент:

<div id="template" style="display:none">
      <div class="cat-box" id="cat-box-id" data-target="#modal-id" data-toggle="modal">
          <h3 class="cat-title"></h3>
      </div>
</div>

<!----- Modal snippet ----->

<div class="modal-title" id="exampleModalLabel"></div>