How do I integrate Google Cloud Translate API into TalentLMS customized Javascript code?

I publish the courses in TalentLMS and need to integrate an automatic translation using Google Cloud API. Via theme settings I can access the Javascript code where I could inject code with post request to API further calling onClick function for <a> elements with ids that I assign using HTML code view in units. As for now, code works however there are mistakes in translating symbols and punctuation marks, also code is limited to translating content that is in <p> elements only. How can I make code work for more complex pages? How can I make sure it keeps the symbols and punctuation marks?

Here is the code:

function translateToSpanish() {
  var paragraphs = document.querySelectorAll("p");
  var targetLanguage = "es";
  var apiKey = "***";

  paragraphs.forEach(function(paragraph) {
    var text = paragraph.textContent;
    var that = paragraph;
  
    var xhr = new XMLHttpRequest();
    xhr.open("POST", "https://translation.googleapis.com/language/translate/v2");
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhr.onload = function() {
      if (xhr.status === 200) {
        var response = JSON.parse(xhr.responseText);
        that.textContent = response.data.translations[0].translatedText;

            // Replace the word "playbook" with "playbook" (shouldn't be translated, but it doesn't work)
        translatedText = translatedText.replace("playbook", "playbook");

        // Replace all occurrences of "quotations marks"
        translatedText = translatedText.replace('"', '"');

        // Replace the ampersand character with "and"
        translatedText = translatedText.replace("&", "and");

        that.textContent = translatedText;
      }
    };
    xhr.send("q=" + encodeURIComponent(text) + "&target=" + encodeURIComponent(targetLanguage) + "&key=" + encodeURIComponent(apiKey));
  });
}
        // for the <a> element to run function when Clicked
var spanishButton = document.getElementById("spanish");
spanishButton.addEventListener("click", translateToSpanish);

HTML code in the unit page

<a id="spanish">Español</a>

original content in English please keep in mind that I am not using the dropdown widget for running the translation but the underlined <a> elements above

I used the above code, it did work, the content gets translated. However, it is very limited and translates only

elements. Moreover, there are some terms that should be in original version, I couldn’t make the translation not to include them. Also the code translates symbols, for example quotations marks (“) turn into “