JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<ul style="list-style-type:none">
  <li>
    <a id="login" class="showLogin" href="#">
      <span class="glyphicon glyphicon-log-in">	
</span> <span>Login</span>
    </a>
  </li>
</ul>

JavaScript

$(document).ready(function() {
  $('#login').on('click', function() {
    change_login_button();
  });
});

function change_login_button() {
  var $el = $('#login');
  var $el2 = $('#login span:last-child');
  textNode = $("#login span:last-child").text();
  $el.find('span.glyphicon').toggleClass('glyphicon-log-out glyphicon-log-in');
  textNode = ($el.hasClass('#login') ? 'Logout' : 'Login');
  $el2.text(textNode);
  $el.toggleClass('#login');
}