单击div并将该div的值附加到其中

Question

我有一些类别标题，每个类别标题都附加到自己的div中。单击任何一个div都会打开一个模式，并且计划将该类别的标题也添加到该模式中。

我最初.append在for循环中有标题，但每个类别标题都紧挨着附加。一定是由于循环造成的，但是将其移出循环不会加载类别div。

然后，我.eq(i).append在该语句中插入一个，但它仅显示第一个类别标题（在本例中为“动物”）。

有没有一种方法可以将“类别标题”附加到单击的任何模式中？我可以获取该类别标题的索引并附加它，就像我最初拥有的那样吗？

JS代码段：

let _library,

    _categories;

getCategories(){ 

    return _categories;

}

loadCategories(){

    let categs = _categories

    let htmlElems = "";

      for (var i = 0; i < categs.length; i++) {

           htmlElems += "<div class='cat-box cat-num-" + i + "'data-target='#modal-id' data-toggle='modal'>" + categs[i].Title + "</div>";

           $(".modal-title").eq(i).append(categs[i].Title); // ---------- //

      }

     let container = document.querySelector("div.top-training");

     container.innerHTML = htmlElems;

     console.log(container);

}

index.js：

$(document).on("click", '.cat-box', function(val) {

    console.log('.cat-box clicked')

    let cat  = $(this).data('category'),

        desc = $(this).find("span").last().text();

// irrelevant code

模态：

<div class="modal" id="modal-id" role="dialog">

<!-- ...etc -->

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