Use javascript to put a DIV element into an existing DIV element

I have some data that I would like to display in a specific DIV element. What currently happens is that a DIV element is created using CSS and a formula and placed at the appropriate height.

The existing DIV that is permanently inserted in the template:

<div data-hour="1" class="slot"></div>

I’m currently writing the corresponding elements into the template like this:

showIn(calendar) {
        if (
            this.date < dateString(calendar.weekStart) ||
            this.date > dateString(calendar.weekEnd)
        ) {
            $(`#${this.id}`).remove();
            return;
        }
        let eventSlot;
        if ($(`#${this.id}`).length) {
            eventSlot = $(`#${this.id}`);
        } else {
            eventSlot = $("<div></div>")
                .addClass("event")
                .attr("id", this.id)
                .click(() => this.clickIn(calendar));
        }
        const h = calendar.slotHeight;
        let linebreak = this.description;
        linebreak = linebreak.split("n").join("<br />");
        eventSlot
            .text(this.description)
            .css("top", (this.startHour) * h - (1*h) + "px")
            .css("backgroundColor", `var(--color-${this.color})`)
            .css("white-space", "pre-line")
            .css("float", "left")
            .appendTo(`.day[data-dayIndex=${this.dayIndex}] .slots`);
    }

My problem is that the formula causes all newly created elements to be at the same height and obscure each other.

My idea is to insert the new DIV into the existing DIV. In the formula I use “this.startHour” . This has the same value as data-hour=”1″ of the existing DIV. Then, if I’m not mistaken, I can display them one below the other using CSS.

I would also be open to alternative suggestions.

Edit:
When I enter the page, the following function is called, in which I read the data and pass it on to the Event class. The showIn() function is then in the Event class.

loadEvents() {
    $(".event").remove();

    if (!this.eventsLoaded) {
        //this.events = JSON.parse(this.lbtbdata.getItem("events"));
        this.events = JSON.parse(this.lbtbdata);
        console.log(this.events);
        if (this.events) {
            for (const date of Object.keys(this.events)) {
                for (const id of Object.keys(this.events[date])) {
                    const event = new Event(this.events[date][id]);
                    this.events[date][id] = event;
                }
            }
        }
        this.eventsLoaded = true;
    }
    if (this.events) {
        for (let dayIndex = 0; dayIndex < 7; dayIndex++) {
            const date = dateString(addDays(this.weekStart, dayIndex));
            if (this.events[date]) {
                for (const event of Object.values(this.events[date])) {
                    event.showIn(this);
                    //console.log(event);
                }
            }
        }
    } else {
        this.events = {};
    }
}