JSFiddle - React, Tailwind, and code Playground

HTML

<div id="language-selection"><div id="current-language"><span class="element-invisible">Current language:</span>
      <img class="language-icon" src="http://www.euromonitor.com/medialibrary/Image/Flag_20x20_United_Kingdom.png" alt="English" title="English" /> English
  </div>
  <div class="element-invisible">Switch to:</div>
  <ul id="other-languages">
  <li class="zh-hans first"><a  href="javascript:;"  data-lang="Chinese" class="clickButton"><img class="language-icon" src="http://www.euromonitor.com/medialibrary/Image/Flag_20x20_China.png" alt="简体中文" title="简体中文" /> 简体中文</a></li>
  <li class="en"><a  href="javascript:;"  data-lang="English" class="clickButton" </a> <span class="language-link"><img class="language-icon" src="http://www.euromonitor.com/medialibrary/Image/Flag_20x20_United_Kingdom.png" alt="English" title="English" />English</span></li>
  <li class="de last"><a href="javascript:;"  data-lang="German" class="clickButton"><img class="language-icon" src="http://www.euromonitor.com/medialibrary/Image/Flag_20x20_Germany.png" alt="German" title="German" /> German</a></li>
</ul>
 </div>   

<ul>
    <li><a class="clickButton" href="folder1/firstLink/Languages/English/folder/index.html">Index Link</a></li>
    <li><a class="clickButton" href="../folder2/secondLink/Languages/English/folder/index.html">A different Link </a></li>
    <li><a class="clickButton" href="../../folder3/Languages/English/folder/index.html">Another different link</a></li>
<ul>

CSS

#language-selection {
    top: 11px;
    background-color: #313131;
    border-color: #3F3F3F;
    background-position: right center;
    background-repeat: no-repeat;
    padding-right: 50px;
    color: #767979;
    cursor: pointer;
    margin-top: 3px;
    right: 0;
    width: 192px;
    position: absolute;
    border-radius: 5px 5px 5px 5px;
    -moz-box-sizing: border-box;
    line-height: 2.1em;
}

html.js .js-hide {
    display: none;
}

.element-invisible {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
}
.element-invisible.element-focusable:active, .element-invisible.element-focusable:focus {
    clip: auto;
    position: static !important;
}
a {
text-decoration:none;
    color:#767979;
}

JavaScript

(function ($) {
    
$(function(){
var select = $('#language-selection');

var options = select.children('#other-languages');
select.attr('style', '-moz-user-select:none;-webkit-user-select:none;');
options.css({
display:'none'
});

select.click(function() {
if(options.css('display') == 'none') {
/* options.css({display:'block'}); */
options.slideToggle('fast');
} else {
/* options.css({display:'none'}); */
options.slideToggle('fast');
}
});

});

})(jQuery);


    var current = "English"
$("[data-lang]").on("click", function() {
    var lang = $(this).data("lang");

    $(".clickButton").prop("href", function(i, href) {
        return href.replace(current, lang);
    });
    

$('#language-selection > #current-language > img').attr('src' , $(this).find('img').attr("src"));

$('#language-selection > #current-language > img').attr('alt' , lang);
$('#language-selection > #current-language > img').attr('title' , lang);


$("#language-selection > #current-language").contents().each(function() {
    if(this.nodeType == 3)
        
             this.nodeValue = this.nodeValue.replace(current, lang);

});



current = lang;

});