Reapplying CSS changes to the Google Translate widget after closing the translate bar

I'm modifying the text and CSS of the Google Translate widget and have an error when using addEventListener and querySelector to reapply CSS and text changes after the Google Translate bar is closed and when the page is returned to the original language.

I'm suddenly getting an error Uncaught TypeError: x.X is undefined pointing to the line

x.X.querySelector('select').addEventListener('change', (event) => {

This new error is probably due to a jQuery main library update.

How do I define x.X?

Thanks to caramba for the answer to my earlier question Modifying output of google.translate.TranslateElement.InlineLayout.VERTICAL and for his followup in the Fiddle linked below.

Fiddle: https://jsfiddle.net/8m2xkez4/

Javascript:

var observer = new MutationObserver(function (event) {
  if(false === document.documentElement.classList.contains('translated-ltr')) {
      renameGoogleSelectDropdown();
  }
});

var renameGoogleSelectDropdown = function(){
    function cleartimer() {     
      setTimeout(function(){ 
          window.clearInterval(myVar); 
      }, 500);             
  }
  function myTimer() {
      if ($('.goog-te-combo option:first').length) {
          $('.goog-te-combo option:first').html('Translate');
          cleartimer();
      }
  }
  var myVar = setInterval(function(){ myTimer() }, 0); 
};


function googleTranslateElementInit() {
  var x = new google.translate.TranslateElement({
  pageLanguage: 'en', includedLanguages: 'af,ach,ak,am,ar,az,be,bem,bg,bh,bn,br,bs,ca,chr,ckb,co,crs,cs,cy,da,de,ee,el,en,eo,es,es-419,et,eu,fa,fi, fo,fr,fy,ga,gaa,gd,gl,gn,gu,ha,haw,hi,hr,ht,hu,hy,ia, id,ig,is,it,iw,ja,jw,ka,kg,kk,km,kn,ko,kri,ku,ky,la, lg,ln,lo,loz,lt,lua,lv,mfe,mg,mi,mk,ml,mn,mo,mr,ms,mt, ne,nl,nn,no,nso,ny,nyn,oc,om,or,pa,pcm,pl,ps,pt-BR, pt-PT,qu,rm,rn,ro,ru,rw,sd,sh,si,sk,sl,sn,so,sq,sr, sr-ME,st,su,sv,sw,ta,te,tg,th,ti,tk,tl,tn,to,tr,tt, tum,tw,ug,uk,ur,uz,vi,wo,xh,yi,yo,zh-CN,zh-TW,zu',
  layout: google.translate.TranslateElement.InlineLayout.VERTICAL
  }, 'google_translate_element');
  

  x.X.querySelector('select').addEventListener('change', (event) => {
    observer.observe(event.target.closest('html'), {
      attributes: true, 
      attributeFilter: ['class'],
      childList: false, 
      characterData: false
    })
    });
}


$(window).on('load', function() {
  $('.goog-te-gadget').html($('.goog-te-gadget').children());
  $("#google-translate").fadeIn('1000');
    renameGoogleSelectDropdown();
});

HTML:

<div id="google-translate">
  <div id="google_translate_element"></div>
</div>

CSS:

#google-translate {
  display: none;
}

from Reapplying CSS changes to the Google Translate widget after closing the translate bar