How to select divs that has a specific html content that matches value

I’ve created a calendar, and the days that are displayed are generated with a js loop

for (let i = 1; i <= lastDay; i++) {
    if (
        i === new Date().getDate() &&
            date.getMonth() === new Date().getMonth()
    ) {
        days += `<div class="today">${i}</div>`;
    } else {
        days += `<div>${i}</div>`;
    }
}

It gives me this DOM result :

<div class="days">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  and so on...t'il 30 or 31 etc
</div>

I’m bringing a repository data from my controller to this twig template that return some dates where sessions has been made.

So I would like to know how I would be able to read with JS all these divs that contains the day number, and mark only the ones that match the twig date (also date number so it matches), and so on the calendar, the user will be able to see every day case where he did a session.

I’ve thought of some like

for (i = 0; i < $(".days div").length; i++) {
    if($( "div" ).html() == {{ session.dayNumber }}) {
        $("div").addClass("marked");
    }
}

But I can’t seem to make it work well.

EDIT : I succeeded to log all the days with :

const monElement = document.querySelector('.days');

for (let i = 0; i < monElement.children.length; i++) {
    console.log(monElement.children[i].textContent);
}

Answer

I am not sure if this is what you wanted but maybe you can use this as a start

Since I don’t know how you will store the days when the user visited the page, I used an array of ‘days’ and compare if the current day from loop is equal with the day from visited..

const visited = [2, 5, 8] // i am not sure how you will store the visited days..
const monElement = document.querySelector('.days')

for (let i = 0; i < monElement.children.length; i++) { // iterate through all elements
  let day = monElement.children[i].textContent;

  for (let v of visited) { // iterate through visited

    if (v == day) {
      monElement.children[i].innerHTML += ' - visited';
      monElement.children[i].classList.add("marked");
    }
  }

}

.days {
  width: 100px;
}

.marked {
  background-color: yellow;
}

<div class="days">
  <div> 1 </div>
  <div> 2 </div>
  <div> 3 </div>
  <div> 4 </div>
  <div> 5 </div>
  <div> 6 </div>
  <div> 7 </div>
  <div> 8 </div>
  <div> 9 </div>
  <div> 10 </div>
</div>