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.