Ads not showing in wordpress post

See more:

Javascript

PHP

CSS3

WordPress

Despite returning the adinserter() function correctly, the ads are not appearing and only the ad header is being displayed. I am not sure what is causing this problem and would greatly appreciate any assistance in resolving this issue. Could it be an error in my code or a configuration problem with the plugin? I am hoping for some guidance and support in fixing this problem.

What I have tried:

function insert_ad_codes($content) {
   if (!function_exists('adinserter')) return $content;

   $paras = explode("</p>", $content);
    $total_paras = count($paras);
   $insert_at = [];

//   // check if device is mobile
   if (wp_is_mobile()) {
     $insert_at = [
      floor($total_paras * 0.4),
      floor($total_paras * 0.8)
    ];
  } else {
    $insert_at = [
      floor($total_paras * 0.4),
      floor($total_paras * 0.8)
    ];
  }

  foreach ($insert_at as $index) {
    $paras[$index] .= '<div class="ad-container ad-container-1">'
                        . '<div class="ad-header ad-header-1">Ad Header</div>'
                        . '<div class="ad-content ad-content-1">' . adinserter(1) . '</div>'
                    . '</div>';
  }
  
  $content = implode("</p>", $paras);
  $content = preg_replace('/(<p[^>]*>)/i', '<div class="ad-container ad-container-16">'
                                            . '<div class="ad-header ad-header-16">Ad Header</div>'
                                            . '<div class="ad-content ad-content-16">' . adinserter(1) . '</div>'
                                        . '</div>' . '$1', $content, 1);
  $content = preg_replace('/(<p[^>]*>.*?<\/p>)/i', '$1' . '<div class="ad-container ad-container-1">'
                                                    . '<div class="ad-header ad-header-1">Ad Header</div>'
                                                    . '<div class="ad-content ad-content-1">' . adinserter(1) . '</div>'
                                                . '</div>', $content, 1);
  
  return $content;
}
add_filter( 'the_content', 'insert_ad_codes');

CSS and js

add_action( 'wp_head', function () { ?>
<style>
.ad-container {
  position: fixed;
  bottom: 0;
  right: 0;
  height: 0;
  overflow: hidden;
  transition: height 0.3s;
}

.ad-header {
  background-color: #333;
  color: #fff;
  padding: 10px;
  text-align: center;
}

.ad-content {
  background-color: #fff;
  padding: 10px;
  display: none;
}

.ad-container.expanded {
  height: 300px;
}

.ad-container.expanded .ad-content {
  display: block;
}
</style>

<script>
    var ad = document.querySelector('.ad-container');
var observer = new IntersectionObserver(function(entries) {
  if (entries[0].isIntersecting) {
    ad.classList.add('expanded');
  } else {
    ad.classList.remove('expanded');
  }
});
observer.observe(ad);

</script>
<?php } );