JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="links">
    <li class="home">
        <a href="#">home</a>
    </li>
    <li class="languages">
        <ul class="available">
        </ul>
    </li>
</ul>

JavaScript

var data = {
      "English": "en",
      "Francais": "fr",
      "German": "gm"
  };

var $liLanguages = $('li.languages');
var $ulAvailable = $('ul.available');

var selectedLanguage = '';

for(var index in data) {
    if(selectedLanguage == '') {
        selectedLanguage = data[index];
        $liLanguages.prepend("<a href='#'>" + data[index].toUpperCase() + "</a>");
    }
    else {
        $ulAvailable.append("<li><a href='#'>" + data[index].toUpperCase() + "</a></li>");
    }
}