I did this using 2 buttons and negative margin space but I’d rather use 1 button. The first button’s text says “Language” and the the other uses the down arrow as the text.

How to add the down arrow special character &#9660 to data-translate?

<button data-translate="select_language"></button>

translator = {
    en: {
        select_language: "Language &#9660" // this obviously doesn't work
    },
    fr: {
        select_languae: "Langue &#9660" // this obviously doesn't work
    }
}

Here is how I originally did it using 2 buttons. I’m new to the HTML world. I’m repeating code so it’d make more sense to do this with 1 button if possible.

<button id="select-language-button-id" data-translate="select_language"></button>
<button id="chevron-button-id">&#9660</button>

#select-language-button-id {
  margin-right: -6px;
  font-size: 14px;
  color: white;
  background-color: black;
  border: none;
  border-radius: 5px;
  padding: 4px 7.5px;
}

#chevron-button-id {
  margin-right: 8px;
  font-size: 11px;
  color: white;
  background-color: black;
  border: none;
  border-radius: 3px;
  padding: 4px 7.5px;
}

As per @GuyIncognito’s question about how I add text to the tags using data-translate alone. I call this function every time I change languages:

function applyTranslations(language) {
  document.querySelectorAll('[data-translate]').forEach((element) => {
    const key = element.getAttribute('data-translate');
    const translation = translations[language][key];
    if (translation) {
      element.innerHTML = translation; // Directly set the translation
    }
  });
}

eg.

applyTranslations("en");

applyTranslations("fr")

;