How do I get XMLHttpRequest to respond with the HTML and expand any nested includes within the HTML?

Question

I have tried to search this in many ways before asking this question. Anyways. For example I have a directory structure that is like this:

project
 |-index.php
 |components
  |-welcome.php
 |scripts
  |-xmlfuncs.js
 |forms
  |-loginForm.php
 ...

Ok so lets say index.php is the starting point and looks something like this:

(ignoring the html headers and css + scripts linking)
<div class="body">
  <div class="header">SITE NAME</div>
  <div class="navigation">
    <li class="eventNav"><a>event</a></li>
    <li class="announceNav"><a>announcements</a></li>
    ...
  </div>
  <div class="viewport" id="viewport">
    <php include './components/welcome.php'; ?>
  </div>
</div>

The idea here is I am going to be able to click one of the li elements and a XMLHttp function called through javascript via an eventListener attached to each nav item and will fetch the component and set the #viewport innerHTML to the response. As you can see initially index.php includes the welcome "component" more like page.

Anyways here is an example of what the welcome.php file looks like in a brief manner:

<div class="welcomeBody">
  <div class="wa_container">
    <div class="welcomeContainer">
      <h1>Welcome</h1>
      <div class="welcomeContent">
      lorem ipsum lorem ipsum...
      </div>
    </div>
  </div>
  <div class="loginContainer">
    <php include './forms/loginForm.php'; ?>
  </div>
</div>

Ok so upon page load of index.php it includes welcome.php which in turn includes loginForm.php (just a simple form) all is well here but as soon as I click one of the

navItem elements and change the viewport innerHTML then try and do an XMLHttpRequest to load the response of welcome.php back into the viewport it doesn't expand the loginForm.php include statement within the HTML.

function XMLviewportChange(page, element, stateOpt){
    const viewport = document.getElementById('viewport');
    let XMLVPC = new XMLHttpRequest();
    XMLVPC.onreadystatechange = function(){
        if(XMLVPC.readyState == 4 && XMLVPC.status == 200){
            viewport.innerHTML = XMLVPC.responseText;
            if(stateOpt == 0) {
                navelems.forEach((item) => {
                    item.style.backgroundColor = 'black';
                    item.firstElementChild.style.color = 'white';
                });
                welcmBtn.style.color = 'white';
                element.style.backgroundColor = 'white';
                element.firstElementChild.style.color = 'black';
            }
            if(stateOpt == 1) {
                element.style.color = 'gold';
                navelems.forEach((item) => {
                    item.style.backgroundColor = 'black';
                    item.firstElementChild.style.color = 'white';
                });
            }
        };
    };
    console.log(page);
    XMLVPC.open('GET', page, true);
    XMLVPC.send();
    XMLVPC.DONE;

here are some photo examples to better illustrate my issue just in case my explanation doesn't make sense.

initial page load welcome.php contents within viewport of index.php

I click the events button (responds with loginForm.php as a test)

I return to the welcome page (doesn't include the loginForm.php or another form)