PHP Pop Up Slider code works on localhost but not web hosting server

I’m trying to create a pop-up slider on my homepage. I generated the code using ChatGPT, and it works fine on my local XAMPP setup when I include right after at the top of the index.php file. However, on my web hosting server, including it right after header.php causes the pop-up to appear without displaying content. When I place it after footer.php, the pop-up shows with content but appears below the footer. Why might this be happening?

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<script>
  $(document).ready(function() {
  let currentPage = 0;
  const pages = $(".dialog-page");
  const pageCount = pages.length;

  function showPage(index) {
    pages.hide();
    $(pages[index]).show();
    updateIndicators(index);
  }

  function updateIndicators(index) {
    $(".indicator").removeClass("active");
    $(".indicator").eq(index).addClass("active");
  }

  $("#dialog-message-a").dialog({
    width: '90%', // Set the width to 90% for better responsiveness
    maxWidth: 900, // Max width to maintain size on larger screens
    height: 'auto', // Auto height based on content
    autoOpen: true,
    modal: true,
    position: { my: "center", at: "top+100", of: window },
    show: { effect: "blind", duration: 700 },
    closeText: "Close"
  });

  $(".arrow-left").click(function() {
    currentPage = (currentPage - 1 + pageCount) % pageCount;
    showPage(currentPage);
  });

  $(".arrow-right").click(function() {
    currentPage = (currentPage + 1) % pageCount;
    showPage(currentPage);
  });

  setInterval(function() {
    if ($("#dialog-message-a").dialog("isOpen")) {
      currentPage = (currentPage + 1) % pageCount;
      showPage(currentPage);
    }
  }, 5000);

  // Generate indicators based on page count
  for (let i = 0; i < pageCount; i++) {
    $(".indicators").append('<span class="indicator' + (i === 0 ? ' active' : '') + '"></span>');
  }

  showPage(currentPage);
});

</script>

<style>
  .dialog-page { 
  display: none; 
  overflow-y: auto; 
  text-align: center; 
  max-height: 100vh; /* Limit height to 80% of the viewport height */
}

.arrow-left, .arrow-right {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 24px;
  font-weight: bold;
  color: #333;
  cursor: pointer;
  background-color: rgba(255, 255, 255, 0.7);
  padding: 10px;
  border-radius: 50%;
  user-select: none;
}

.arrow-left { left: 10px; }
.arrow-right { right: 10px; }

.indicators { 
  text-align: center; 
  margin-top: 20px; 
}

.indicator { 
  display: inline-block; 
  width: 12px; 
  height: 12px; 
  margin: 0 5px; 
  border-radius: 50%; 
  background-color: #ddd; 
}

.indicator.active { 
  background-color: #333; 
}

/* Media Queries for Responsiveness */
@media (max-width: 600px) {
  .arrow-left, .arrow-right {
    font-size: 18px; /* Smaller arrow size on mobile */
    padding: 8px; /* Less padding */
  }
  #dialog-message-a { 
    width: 95%; /* More width on smaller screens */ 
    max-height: 80vh; /* Limit height on mobile devices */
  }
  .dialog-page p { 
    font-size: 14pt; /* Slightly smaller font size */ 
  }
  .dialog-page img { 
    width: 100%; /* Ensure images take full width */ 
    height: auto; /* Maintain aspect ratio */ 
  }
}

@media (min-width: 601px) and (max-width: 900px) {
  #dialog-message-a { 
    width: 90%; /* Less width for medium screens */ 
    max-height: 90vh; /* Limit height for medium devices */
  }
  .dialog-page img { 
    width: 80%; /* Adjust image size for medium screens */ 
  }
}

@media (min-width: 901px) {
  #dialog-message-a { 
    max-height: 80vh; /* Limit height for larger screens */
  }
}

</style>

<div id="dialog-message-a" title="Events">
  <!-- Left Arrow Button -->
  <div class="arrow-left">&#9664;</div>

  <!-- Right Arrow Button -->
  <div class="arrow-right">&#9654;</div>

  <!-- Page 1-->
  <div class="dialog-page">
    <p style="font-size:15pt; font-weight:bold;">Page 1</p>
  </div>

  <!-- Page 2 -->
  <div class="dialog-page">
    <p style="font-size:15pt; font-weight:bold;">image</p>
  </div>
  
  <!-- Page 3-->
  <div class="dialog-page">
    <p style="font-size:15pt; font-weight:bold;">Page 3</p>
  </div>

  <!-- Indicators for Current and Total Pages -->
  <div class="indicators">
    <!-- The indicators will be generated by JavaScript -->
  </div>
</div>

I try in xampp it works fine but not one web hosting server.