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

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

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;