data undefined using loadPageSection.js

Question

I've been trying to sort this for 2 days and about to go insane. Please can anyone help me. I have the following script which basically imitates jquery .load() ... which I can't use due to a conflict with jquery versions.

/**
 * Loads an HTML document from a URL and retuns an element selected using
 * the 'selector' parameter
 *         Example usage:
 *                 loadPageSection('./myPage.html', '#container', (r, err) => console.log(r, err));
 *
 * @method loadPageSection
 * @param  {String} url
 * @param  {String} selector - A valid CSS selector
 * @param  {Function} callback - To be called with two parameters (response, error)
 * @return {void} - The Element collected from the loaded page.
 */
window.loadPageSection = function loadPageSection(url, selector, callback) {
  if (typeof url !== 'string') {
    throw new Error('Invalid URL: ', url);
  } else if (typeof selector !== 'string') {
    throw new Error('Invalid selector selector: ', selector);
  } else if (typeof callback !== 'function') {
    throw new Error('Callback provided is not a function: ', callback);
  }

  var xhr = new XMLHttpRequest();
  var finished = false;
  xhr.onabort = xhr.onerror = function xhrError() {
    finished = true;
    callback(null, xhr.statusText);
  };

  xhr.onreadystatechange = function xhrStateChange() {
    if (xhr.readyState === 4 && !finished) {
      finished = true;
      var section;
      try {
        section = xhr.responseXML.querySelector(selector);
        callback(section);
      } catch (e) {
        callback(null, e);
      }
    }
  };

  xhr.open('GET', url);
  xhr.responseType = 'document';
  xhr.send();
};

I then have the following script.

$('li.product').each(function(index, el) {
    var _this = $(el);
    var thisProductName = _this.find('.title');
    var thisProductURL = thisProductName.find('> a').attr('href');
    var thisContent = loadPageSection(thisProductURL, '.form-field', (r, err) => console.log(r, err));
    alert(thisContent);
}); 

In the console log I can see it is looping and retrieving the html. However, next to each one it is saying "undefined" and the looped alert messages say the same. I can't for the life of me get these html snippets to appear anywhere other than in the log. Where am I going wrong? P.s. I'm a newbie at javascript/jquery.

Thanks for any help.