Не удается правильно добавить значения JS obj в динамически созданные элементы div

Question

У меня есть несколько категорий, которые приходят через axios, и у каждой есть описание. Каждый заголовок категории размещается в своем собственном элементе div, который был клонирован с использованием шаблонов, например, при нажатии элемента div с надписью «Животные» открывается модальное окно, а также отображается заголовок «Животные». Я вижу каждое из описаний в консоли, но я не смог добавить правильное описание в правильный модал.

Пока у меня так, что модал показывает то же описание (которое является последним значением), и я не уверен почему. Если я переместу $.each за пределы цикла, это то же самое.

Ранее я пытался установить атрибуты для правильной загрузки описаний, но, похоже, он работал только с заголовками категорий.

Есть мысли? Как я могу добавить правильное значение описания в правильный div?

JS Fiddle

Фрагмент JS:

loadCategories(){
        // debugger;
        let categs = _categories,
        libCrs = _library

        console.log(typeof categs); // obj

            let $host = $("#host");
            for (var i = 0; i < categs.length; i++) {
                let $template = $("#template").clone();

                $("#cat-title").empty();
                $("#cat-title").append(categs[i].Title);

                $("#cat-box-id").attr("data-category", categs[i].Title); // keep

                $host.append($template.html());
                console.log('catdesc ' + categs[i].Description) // does show everything (see console snippet below)

                $.each(categs, function(i, val) {
                    $("#category-desc").empty();
                    $("#category-desc").append(val.Description);
                })
            }

            let container = document.querySelector("div#template");
            container.innerHTML = $host;

    }

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" id="cat-title"></h3>
            </div>
        </div>

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

            <div class="modal-body">
              <div class="category-desc" id="category-desc"></div>
            </div>
</div>

Консоль

catdesc Animals are multicellular eukaryotic organisms 
// five others
catdesc A capital city (or simply capital) is the municipality exercising primary // this is what's being appended into every div