How to make arrays with time?

Question

JavaScript

<table class="col-lg-5 timetable">
                    <caption>Для &#8545;-&#8547; курсов</caption>
                    <caption>Четверг</caption>
                    <tr>
                        <th>Пара</th>
                        <th>Время</th>
                        <th>Перемена</th>
                    </tr>
                    <tr>
                        <td class="activeOne">1</td>
                        <td id="first"></td>
                        <td>10 минут</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>10:10 - 11:40</td>
                        <td>30 минут</td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td>12:10 - 13:40</td>
                        <td>10 минут</td>
                    </tr>
                    <tr>
                        <td>4</td>
                        <td>13:50 - 15:20</td>
                        <td>10 минут</td>
                    </tr>
                    <tr>
                        <td>5</td>
                        <td>15:30 - 17:00</td>
                        <td>10 минут</td>
                    </tr>
                    <tr>
                        <td>6</td>
                        <td>17:10 - 18:40</td>
                        <td></td>
                    </tr>
                </table>

.timetable td {
    --progress: 0%;
    border: 1px solid #000;
}
.activeOne{
    background-color: #ff8200;
}
.TimeProg {
    background-color: #ff8200;
    width: var(--progress);
    height: 6px;
}

document.addEventListener("DOMContentLoaded", () => {
            const container = document.getElementById("first");
            const currentTimeStamp = new Date();
            const fT = new Date(currentTimeStamp.setHours(20, 00));
            const sT = new Date(currentTimeStamp.setHours(22, 2));

            const formatTime = date => {
                let hours = date.getHours();
                let minutes = date.getMinutes();

                if (hours < 10) hours = "0" + hours;
                if (minutes < 10) minutes = "0" + minutes;

                return `${hours}:${minutes}`;
            };
            container.innerHTML = `${formatTime(fT)} - ${formatTime(sT)} <div class="TimeProg"></div>`;
            const ticker = () => {
                const totalOfRange = (+sT - +fT) / 60000;
                const minutesPassed = (Date.now() - +fT) / 60000;
                const progress = minutesPassed / (totalOfRange / 100);

                container.style.setProperty("--progress", progress + "%");
            };

            ticker();
            setInterval(ticker, 1000);
        });

I need that in a certain period of time, which is created through js (This is not necessary, now I have written such a script), an active class is given to the "pairs" column and appears at (in the example) #first. And at the end of the time he was removed. But the most difficult, and the main task, is to make arrays with such a number of gaps, and so that<div class="TimeProg"></div>

const totalOfRange = (+sT - +fT) / 60000;
                const minutesPassed = (Date.now() - +fT) / 60000;
                const progress = minutesPassed / (totalOfRange / 100);

was also not tied to one constant.