I got following HTML where the span-elements are generated by Advanced Custom Fields:

<div class="container-dates">
  <span class="start_date">20220218</span>
  <span class="end_date">20220319</span>
</div>
<div class="container-dates">
  <span class="start_date">20220218</span>
  <span class="end_date">20220319</span>
</div>

The output in the four span-elements are supposedly dates, so I used moment.js to convert them to a suitable date format.

time = document.getElementsByClassName("start_date")[0]
var datestart = moment(time.innerHTML).format('DD MMMM YYYY');
time.innerHTML = datestart

I did the same for the end_date. It outputs the two span-elements in the first .container-dates as expected.

<span class="start_date">18 February 2022</span>
<span class="end_date">19 March 2022</span>

But leaves the span-elements in the second .container-dates as they were. The goal is to achieve that all dates are converted into the correct format. I tried using querySelector and also tried following code, based on answer in SO question 40544845:

time = document.getElementsByClassName("start_date");

for (var i=0; i<time.length; i++) {
    var datestart = moment(time.innerHTML).format('DD MMMM YYYY');
}
time.innerHTML = datestart

Both are not working. Can anybody help out?