JSFiddle - React, Tailwind, and code Playground

by Brian Dillingham

HTML

<div class="btn-group">
    <button type="button" class="btn dropdown-toggle" data-toggle="dropdown">
    <img src="images/flag/United-Kingdom.png" alt=""> English <span class="fa fa-bars"></span>
     </button>
     <ul class="dropdown-menu" role="menu">
         <li><a href="#" onclick="changeDefault(this)"><img src="images/flag/Germany.png" alt="" > Deutsch</a></li>
         <li><a href="#" onclick="changeDefault(this)"><img src="images/flag/France.png" alt="" > Français</a></li>
         <li><a href="#" onclick="changeDefault(this)"><img src="images/flag/Spain.png" alt=""> Español</a></li>
         <li><a href="#" onclick="changeDefault(this)"><img src="images/flag/Nederlands.png" alt="" > Nederlands</a></li>
     </ul>
</div>

JavaScript

function changeDefault(item) {    
    var button = document.getElementsByClassName('dropdown-toggle')[0]
    button.innerHTML = item.innerHTML + '<span class="fa fa-bars"></span>';
}