Doesn't work correctly when 2 gtranslate blocks are enabled

I'm getting the same issue in one of the project

This only fixes the issue when cdn is turned off, otherwise it uses the code from the cdn where the javascript is not patched.
I think the root cause is here https://git.drupalcode.org/issue/gtranslate-3396734/-/blob/3396734/src/P...
It will execute that finction on each build resulting in multiple select lists, ran in the build function here https://git.drupalcode.org/issue/gtranslate-3396734/-/blob/3396734/src/P...

I've the CDN turned off but still having the same issue.
I'm loading the block in my page template under two different wrappers for desktop and one at a different location for mobile
{{ drupal_entity('block', 'gtranslate') }}
It was working for me in 8.x branch but after 3.x this seem to have broken and now both blocks are loading one after the other.

Attaching screenshot as mentioned in #5

@BWilliams1992 is on to something with the javascript getting included twice. This module needs some love.

This refactor is headed in the right direction but wasn't working for me. https://www.drupal.org/project/gtranslate/issues/3346829 🐛 Refactor to use libraries and compatibility with Big Pipe Needs work

My sinful quick fix for now. If the block is found more than once I'm just doing a string replace to remove the javascript from getting added again. Be sure you pay attention to which widget you are using.

function hook_preprocess_block(&$variables) {
  if ($variables['plugin_id'] == 'gtranslate_block') {
    if (isset($variables['attributes']['id']) && $variables['attributes']['id'] != 'block-gtranslate') {
      // Hack to remove the script tag from the gtranslate block if included more
      // than once on the page. See https://www.drupal.org/project/gtranslate/issues/3396734.
      $script = "<script>(function(){var js = document.createElement('script');js.setAttribute('src', 'https://cdn.gtranslate.net/widgets/latest/ln.js');js.setAttribute('data-gt-orig-url', '/');js.setAttribute('data-gt-orig-domain', 'tpa.lndo.site');document.body.appendChild(js);})();</script>";
      $variables['content']['#gtranslate_html'] = str_replace($script, '', $variables['content']['#gtranslate_html']);
    }
  }
}

The solution of the Merge request only works for the "Dropdown" widget. I added another solution for the "Nice Dropdown with Flags" widget. We will probably need a different solution for each widget type.

🐛 Refactor to use libraries and compatibility with Big Pipe Needs work is definitely a big improvement on the overall situation.

For our site, where we are using the "Dropdown" widget, the widget renders twice correctly, but it's also appending two <div id="google_translate_element2"> elements to the first widget on the page, see screenshot below:

After applying 🐛 Refactor to use libraries and compatibility with Big Pipe Needs work , it seems to do better in that the "google_translate_element2" element gets added after each corresponding widget, but it still has the problem that the same ID is being used twice. This is causing a ding by our accessibility testing tools, and it's malformed HTML to use the same ID twice.

(Sorry wrong screenshot attached, fixing previous comment)