On page refresh error Cannot read properties of null (reading 'addEventListener')

I have a couple of HTML pages that I am loading some code snippets in them using the jQuery .load method, here's a .load example in my index.html:

$('#rotating-content').load(`./snippets/shared/rotating-content.html`);

"rotating-content.html" has two Bootstrap carousels that I am trying to load in my index.html and to rotate them both by using a single indicator, and for that purpose, I am using this method:

var carouselA = document.getElementById('carouselRotatingContent');
var carouselB = document.getElementById('carouselRotatingImage');
carouselA.addEventListener('slide.bs.carousel', function(e) {
    var bsCarouselB = bootstrap.Carousel.getInstance(carouselB)
    bsCarouselB.to(e.to)
})

This is working fine on the initial page load but when I refresh the page, then I get this error "Cannot read properties of null (reading 'addEventListener')" on this line:

carouselA.addEventListener('slide.bs.carousel', function(e) {

I think because carouselA is becoming unrecognizable when the page is refreshed. I tried putting the JS code in my rotating-content.html, I thought maybe it was because of the load method but that didn't help either.

Below is the HTML of my rotating-content.html:

<div class="container-fluid ps-md-0 pe-md-0" id="rotating-wrapper">
  <div class="row g-0">
    <div class="col-md-4 col-lg-6 bg-image">
      <div id="carouselRotatingImage" class="carousel slide" data-bs-ride="carousel" data-bs-interval="false">
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img src="..." alt="" class="img-fluid">
          </div>
          <div class="carousel-item">
            <img src="..." alt="" class="img-fluid">
          </div>
          <div class="carousel-item">
            <img src="..." alt="" class="img-fluid">
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-8 col-lg-6 rotating-content">
      <div class="inner-rotating-content">
        <div id="carouselRotatingContent" class="carousel slide" data-bs-ride="carousel" data-bs-interval="false">
          <div class="carousel-inner">
            <div class="carousel-item active">
              <h3>Ipsum header</h3>
              <p>Ipsum content</p>
              <a href="#" class="btn btn-red" target="_blank">Learn More</a>
            </div>
            <div class="carousel-item active">
              <h3>Ipsum header</h3>
              <p>Ipsum content</p>
              <a href="#" class="btn btn-red" target="_blank">Learn More</a>
            </div>
            <div class="carousel-item active">
              <h3>Ipsum header</h3>
              <p>Ipsum content</p>
              <a href="#" class="btn btn-red" target="_blank">Learn More</a>
            </div>
          </div>
          <div class="carousel-indicators">
            <button type="button" data-bs-target="#carouselRotatingContent" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
            <button type="button" data-bs-target="#carouselRotatingContent" data-bs-slide-to="1" aria-label="Slide 2"></button>
            <button type="button" data-bs-target="#carouselRotatingContent" data-bs-slide-to="2" aria-label="Slide 3"></button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

What's the reason for this error and how to fix it?