无法将JS obj值正确附加到动态创建的div中

Question

我有一些通过axios进入的类别，每个类别都有一个描述。每个类别的标题都位于使用模板克隆的自己的div中，例如，单击显示“ Animals”的div将打开一个模态，标题“ Animals”也会显示出来。我可以在控制台中看到每个描述，但是无法将正确的描述附加到正确的模式中。

现在，我有了它，以便模式显示相同的描述（这是最后一个值），但我不确定为什么。如果我将$.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