how to control jinja loop using javascript

Question

I am trying to make something like a todolist web with flask, and I am inserting new tasks using a jinja loop in index.html

{% for x in data %}
    <div class="love">
        <button type="button" class="tasks" style="background-color: {{x[1]}};">
            {{x[0]}}<i class="{{x[2]}}" id="habitIcons"></i>
        </button>
    </div>
{% endfor %}

and I've add some javascript code to define clicked buttons by adding a ("clicked") class to them

window.addEventListener("DOMContentLoaded", (event) => {
    const habitBtns = document.getElementsByClassName("habits");
    const habitBtnsArray = Array.from(habitBtns);
    habitBtnsArray.forEach(element => {
        element.addEventListener("click", () => {
            element.setAttribute("class", "clicked");
            element.removeAttribute("style")
            reloadCss()
        });
    })
})

the problem is when the window reloads, all the tasks lose there ("clicked") class and it get replaced by the default ("habits") class as you can see in the html code earlier what can I do to prevent that from happening keep in mind that I use vanilla javascript

I thought of changing the data base but I relised that I am using vanilla javascript.