JSFiddle - React, Tailwind, and code Playground

by LuckyLuzz

HTML

<button class="translate" id="en-gb">English</button>
<button class="translate" id="zh-tw">Chinese</button>

<ul>
  <li class="lang" key="HOME"></li>
  <li class="lang" key="ABOUT"></li>
  <li class="lang" key="CONTACT"></li>
</ul>

JavaScript

var arrLang = {
          "en-gb": {
            "HOME": "Home",
            "ABOUT": "About Us",
            "CONTACT": "Contact Us",
          },
          "zh-tw": {
            "HOME": "首頁",
            "ABOUT": "關於我們",
            "CONTACT": "聯絡我們",
          }
        };

        $(document).ready(function() {
          // The default language is English
          var lang = "en-gb";
          $(".lang").each(function(index, element) {
            $(this).text(arrLang[lang][$(this).attr("key")]);
          });
        });

        // get/set the selected language
        $(".translate").click(function() {
          var lang = $(this).attr("id");

          $(".lang").each(function(index, element) {
            $(this).text(arrLang[lang][$(this).attr("key")]);
          });
        });