动态将字符串附加到其特定模式

Question

我有一堆属于自己的div的类别。单击div会打开一个模态，并且我要创建一个模态，以便使类别名称也出现在模态的顶部。例如，单击Animals div会打开模态，单词“ Animals” ”出现在模式中。

我目前正在将类别的标题附加到模态标题的div上，但我看到的是一行中的每个类别标题，而不是正确的标题-附加内容位于循环中，我怀疑这可能与它有关，但是将附加项置于循环之外会导致Category div无法加载。

JS代码段：

let _library,
    _categories;

export default class {
    constructor() {
        this.callRESTAPI();
    }

    callRESTAPI(){
        axios.all([
            axios.get([url] + "/anl_la/_api/web/lists/getByTitle('Categories')/items?$select=Title,Description,Courses/Title,SortOrder&$expand=Courses&$orderby=Title&$top=1000",
            {
                method: "GET",
                credentials: "include",
                mode: "no-cors",
                headers: {
                    "Accept": "application/json; odata=verbose"
                }
            })
       // irrelevant code
        ]).then(axios.spread((cat, lib, admn) => {
            _categories = cat.data.d.results;
            _library = lib.data.d.results;

            this.loadCategories();
            this.loadCourses();
        })).catch(error => {
            console.log(error);
        });
    }


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").append(categs[i].Title); // ---------- //
            }

            let container = document.querySelector("div.top-training");
            container.innerHTML = htmlElems;
            console.log(container);
    }

    loadCourses(){ // Training Library

        let crs = _library
            .map(x => {
                return {
                 "Description": x.Description,
                 "Title": x.Title
                }
            }).sort();
            console.log(JSON.stringify(crs))

        this.populateCategory(crs, "div.top-training");
    }


populateCategory(arrObj, parentTarget){
        arrObj = arrObj.filter((v, p) => arrObj.indexOf(v) == p);

        $.each(arrObj, function(idx, val) {

                let targetDiv = $(parentTarget).hasClass(".cat-box"),
                    desc = _categories
                    .filter(x => {
                        return x.Description 
                    })

            let modalTrigger = $('<div />', {
                'class': '.cat-box',
                'data-category': val.Category,
                'data-target': '#modal-id',
                'data-toggle': 'modal',
                'text': val
            });

            targetDiv.append(modalTrigger);

            $.each(desc, function(idx, val) {
                $(".category-desc").append("<p>" + val.Description + "</p>")
            }) // -------------- not working either

        });
    }

index.js：

import AllCoursesComponent from './SiteAssets/scripts/allCourses';

let allComp = new AllCoursesComponent();

$(document).on("click", '.cat-box', function(val) {
    console.log('.cat-box clicked')
    let cat  = $(this).data('category'),
        desc = $(this).find("span").last().text();

    $(".training-titles-ul").empty();
    let titles = allComp.getPayload().filter(x => x.Title === cat);
});