How do I get scripts to work after a xhttps request

Question

So I have a search page that I'm working on that has a given JSON object as a return. When I click the search button, it's supposed to load up the results page (without a refresh), with the JSON parsed and placed neatly in div's using JS (I can't use jQuery) (this code is in ajax_info.html). Everything independently works. However, when I try to use AJAX with JavaScript, it doesn't load. Again, everything works when loaded independently. But right now, no scripts are working inside the script tag of ajax_info.html. Is there a better method that I could use to update the page with the results page without reloading? This is my code:

function loadDoc() {

  var setInnerHTML = function(elm, html) {
    elm.innerHTML = html;
    Array.from(elm.querySelectorAll("script")).forEach( oldScript => {
      const newScript = document.createElement("script");
      Array.from(oldScript.attributes)
        .forEach( attr => newScript.setAttributes(attr.name, attr.value) );
      newScript.appendChild(document.createTextNode(oldScript.innerHTML));
      oldScript.parentNode.replaceChild(newScript, oldScript);
    });
  }

  console.log('hello');

  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200 && xhttp.readyState == XMLHttpRequest.DONE) {
      setInnerHTML(document.getElementById("demo"),this.responseText);
      console.log(this.responseText);
    }
  };
  xhttp.open("POST", "ajax_info.html", true);
  xhttp.send();
}

and this is the relevant code for ajax_info.html:

<script>

alert("hello");
console.log('adfasdf');
const searchResults = {
  //Json stuff
}
// console.log(searchResults);
//const obj = JSON.parse(searchResults);
//document.getElementById("demo2").innerHTML = searchResults.response.docs[0].es_description;
let text="";
for(let i=0; i<searchResults.response.docs.length; i++) {
  text+="<div class='p-3 border rounded-3'>";
  text+="<a href=''>"+ "<strong class='text-primary largeText'>" + searchResults.response.docs[i].es_title + "</strong></a>";  
  text+="<div class='largeText'>" + searchResults.response.docs[i].es_description + "</div>";
  text+="<div>" + searchResults.response.docs[i].author + "</div>";
  text+="<div>" + searchResults.response.docs[i].site + "</div>";
  text+="<div>" + searchResults.response.docs[i].es_date + "<a class='text-success'> " + searchResults.response.docs[i].site + "</a></div>";
  //text+="<a href='url'>"+ searchResults.response.docs[i].es_title + "</a>";

  text+="</div>";
  //text+=searchResults.response.docs[i].author + "<br>";
  //text+=searchResults.response.docs[i].site + "<br>";
  //text+=searchResults.response.docs[i].es_date + "<br>";
  //text+="<p></p>";
  document.getElementById("demo2").innerHTML = text;
  console.log(i);
}

//alert(searchResults.response.docs.length);
</script>

demo2 is the id of the div inside of ajax_info and demo is the id of the body of index.html