getBoundingClientRect() returns the same values for different elements

const imageFolder = 'images/'; // Path to the local folder containing the images
const totalImages = 26; // (Total number of images in the folder) / 2

// Function to pad image name with zeros
function padImgName(i) {
  let imgName;
  if (i < 10) {
    imgName = `00${i}`;
  } else if (i < 100) {
    imgName = `0${i}`;
  } else {
    imgName = `${i}`;
  }
  return imgName;
}

// Function to load images from the local folder
function loadImages() {
  const leftImages = document.getElementById('left images');
  const rightImages = document.getElementById('right images');

  // Assuming images are named as 000.jpg, 001.jpg, etc.
  var imageNumber = 0;
  for (let i = 0; i <= totalImages; i++) {
    // left
    const leftImg = document.createElement('img');
    const leftImgName = padImgName(imageNumber);

    leftImg.src = `${imageFolder}${leftImgName}.jpeg`;
    leftImg.alt = `Image ${i} left`;
    leftImg.id  = `Image ${i} left`;

    leftImages.appendChild(leftImg);

    imageNumber++;

    // right
    if (imageNumber <= totalImages * 2) {
      const rightImg     = document.createElement('img');
      const rightImgName = padImgName(imageNumber);

      rightImg.src = `${imageFolder}${rightImgName}.jpeg`;
      rightImg.alt = `Image ${i} right`;
      rightImg.id  = `Image ${i} right`;

      rightImages.appendChild(rightImg);

      imageNumber++;
    }
  }
}

// Function to adjust the visibility of the images
function adjustImageVisibility() {

  // get bottom of Text 
  const centerDiv   = document.getElementById('center text');
  const lastElement = centerDiv.lastElementChild;
  const rect        = lastElement.getBoundingClientRect();
  const textBottom  = rect.bottom + window.scrollY;
  console.log(textBottom);

  // left
  for (let i = 0; i <= totalImages; i++) {
    const img  = document.getElementById(`Image ${i} right`);
    const rect = img.getBoundingClientRect();
    console.log(rect);
  }
}

// Load images from the local folder when the page loads
window.onload = function() {
  loadImages();
  adjustImageVisibility();
};

/* --------------- body --------------- */

body {
  margin: 0;
  padding: 0;
  height: 100vh;
  display: flex;
  font-family: Arial, sans-serif;
}


/* --------------- unused --------------- */

.column {
  display: flex;
  flex-direction: column;
  /* Stack items vertically */
  align-items: top;
  justify-content: top;
}


/* --------------- columns --------------- */

.left,
.right {
  /* for the images */
  width: 20%;
  padding: 5px;
}

.center {
  /* for the text */
  width: 100%;
  /* Adjusted to fill the remaining space */
  padding: 20px;
  text-align: left;
}


/* --------------- images --------------- */

img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}


/* --------------- title --------------- */

h1 {
  text-align: center;
}


/* --------------- horizontal lines --------------- */

hr {
  width: 100%;
}

hr.fox {
  width: 80%;
  border: none;
  border-top: 2px solid;
  overflow: visible;
  color: black;
  text-align: center;
}

hr.fox::after {
  display: inline-block;
  content: '^.^';
  position: relative;
  /* Use absolute positioning */
  top: -10px;
  /* Adjust the position as needed */
  background: white;
  /* Uncomment if needed */
  padding: 0 4px;
  /* Uncomment if needed */
}


/* --------------- for the ascii art --------------- */

pre {
  text-align: center
}

  <div class="left" id="left images"></div>

  <div class="center" id="center text">
    <h1>Azul's Blog</h1>

    <pre style="text-align: center">
        ASCII ART
        </pre>
    <p>
      text<br>
      <br>text<br>
      <br>text<br>
      <br>text<br>
      <br>text<br>
      <br>text<br>
      <br>text<br>
      <br>text<br>
      <br>text<br>
    </p>
    <hr class="fox">
    <p>
      text<br>
      <br>text<br>
      <br>text<br>
      <br>text<br>
      <br>text<br>
      <br>text<br>
      <br>text<br>
      <br>text<br>
      <br>text<br>
    </p>
    <hr class="fox">
    <p>
      text<br>
      <br>text<br>
      <br>text<br>
      <br>text<br>
      <br>text<br>
      <br>text<br>
      <br>text<br>
      <br>text<br>
      <br>text<br>
    </p>
    <hr class="fox">
  </div>
  <div class="right" id="right images"></div>