title: Language switch - use HTML not Key
body: <p>I see the excellent forum before on how to use Json to create a multi language site (<a href="https://stackoverflow.com/questions/48137394/build-multiple-language-website-using-jquery-and-json-based-methods">Build multiple language website using jQuery and JSON based methods</a>).</p>
  
  <p>I wanted to see if it is possible to use this, but not using the key attribute, instead have as normal HTML. Please see codepen:- <a href="https://codepen.io/scottYg55/pen/ZEzpOpm" rel="nofollow noreferrer">https://codepen.io/scottYg55/pen/ZEzpOpm</a></p>
  
  <p>I can see that the key is being called within the jQuery:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;button class="translate" id="en-gb"&gt;English&lt;/button&gt;
  &lt;button class="translate" id="zh-tw"&gt;Chinese&lt;/button&gt;
  
  &lt;ul&gt;
    &lt;li class="lang" key="HOME"&gt;&lt;/li&gt;
    &lt;li class="lang" key="ABOUT"&gt;&lt;/li&gt;
    &lt;li class="lang" key="CONTACT"&gt;&lt;/li&gt;
    &lt;li class="lang"&gt;Home&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>var arrLang = {
    "en-gb": {
      "HOME": "Home",
      "ABOUT": "About Us",
      "CONTACT": "Contact Us",
    },
    "zh-tw": {
      "HOME": "首頁",
      "ABOUT": "關於我們",
      "CONTACT": "聯絡我們",
    }
  };
  
  // The default language is English
  var lang = "en-gb";
  
  // Check for localStorage support
  if ('localStorage' in window) {
    var usrLang = localStorage.getItem('uiLang');
    if (usrLang) {
      lang = usrLang
    }
  }
  
  console.log(lang);
  
  $(document).ready(function() {
    $(".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");
  
    // update localStorage key
    if ('localStorage' in window) {
      localStorage.setItem('uiLang', lang);
      console.log(localStorage.getItem('uiLang'));
    }
  
    $(".lang").each(function(index, element) {
      $(this).text(arrLang[lang][$(this).attr("key")]);
    });
  });
  </code></pre>
  
  <p>I have changed this to HTML but still no luck, anyone have any ideas?</p>
  
  <p>Thank you!</p>