Clicking on div isn't opening modal

Question

I have a bunch of divs and clicking on any of them should open a modal that I've hardcoded into my html. The plan is to click on a specific Category, the modal opens, and it shows the sub-categories (Training Courses) that are associated with that particular Category. But for right now, I'm most concerned about getting an actual modal to appear on click. In my console I can see that the modal is getting clicked but there's no indication elsewhere that the modal's showing up (i.e. it doesn't appear to be super small or invisible).

Any thoughts on this one?

JS snippet:

        // 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);
        });

    loadCategories(){
        let categs = _categories;

        let htmlElems = "";
            for (var i = 0; i < categs.length; i++) {
                htmlElems += "<div class='cat-box cat-num-" + i + "'>" + categs[i].Title + "</div>";
            }

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

    }

    loadCourses(){ // Training Library

        let crs = _library
            .map(x => {
                return x.Title;
            }).sort();

        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");


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

            targetDiv.append(modalTrigger);
       // irrelevant code here
        });
    }

index.js

import AllCoursesComponent from './path/allCourses';

let allComp = new AllCoursesComponent();

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

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

});

HTML:

<div class="top-training"></div>

<!----- Modal ----->
    <div class="modal" id="modal-id" role="dialog">
      <div class="modal-dialog" role="document">
       <!-- modal stuff here -->   
      </div> 
    </div> 

Answer 1

Here is an example of how you can toggle a bootstrap modal for your situation

<div class="top-training" id="traning1" data-toggle="modal" data-target="#modal-id">Here</div>

<!----- Modal ----->
    <div class="modal" id="modal-id" role="dialog">
      <div class="modal-dialog" role="document">
       <!-- modal stuff here -->   
       here
      </div> 
    </div> 

To handle the dynamic data that you need to pass in to that modal, I would probably attach an event handler to each div that sets the modal's content. Example:

$('#traning1').on('click',function(){
   $("#someIdForModalContent").text('I am some content.');
});