i was refactoring my js code and it popped out a bug. The bug is that in a HTMLCollection of 4 elements (and if i console log them, they are ok), but if i loop them in a for, it shows me that the collection is actually 3 instead of 4. So for example an array of indexes (0,1,2,3), it shows (0,1,3) skipping the second element. I can't show much of the code because it's quite long and so my question is: why does this can happend?

console.log of the HTMLCollection:

HTMLCollection(3) [li.page-item, li#page0.page-item, li.page-item, page0: li#page0.page-item]
0: li.page-item
1: li#page0.page-item
2: li#page1.page-item
3: li.page-item
page0: li#page0.page-item
page1: li#page1.page-item
length: 4
[[Prototype]]: HTMLCollection

console.log of the length:

3

Html of pagination (i wrote a js function for create new li inside the div):

              <ul id="pagination" class="pagination flex-wrap">
                <li class="page-item"><button type="button" class="page-link" onclick="characters.deleteCharacter()">Delete</button></li>
                <li class="page-item active" id="page0" style="display: none;"><a type="button" class="page-link">0</a></li>
                <li class="page-item"><button type="button" class="page-link" onclick="characters.createCharacter()">New</button></li>
              </ul>