.removeClass not removing class from panel menu link

.removeClass not removing class from panel menu link

My panel menu works, links work, but when I try to style it so that the current page's link is highlighted in the panel menu it doesn't want to cooperate.

Here's the relevant html:
  1. <div data-role='panel' data-position='left' data-position-fixed='false' data-display='reveal' id='nav-panel'>
    <ul  data-role='listview' style='margin-top:-16px;' class='nav-search'>

     <li class='menuitem'><a style='display:block;' href='#' data-rel='back'>Back</a></li>
     
     <li data-icon='delete' >
    <a href='#' data-rel='close'>Close menu</a>
    </li>

    <li id='drill-down' data-role='list-divider' style='background-color:black;color:white;font-family:Arial;padding-left:5px;padding-top:2px;padding-bottom:2px;font-size: 13.65px;'>Drill down in this period</li>

    <li data-filtertext='wai-aria voiceover accessibility screen reader'>
    <a href='#page1' class='current'>Home</a>
    </li>
  2. <li data-filtertext='wai-aria voiceover accessibility screen reader'>
    <a href='#page1'>Info</a>
    </li>
 Here's the javascript:
  2. $( function() {
  3.   $('#nav-panel').panel();
  4.   });
  5.   $(function() {
  6.     $('#add-form').panel();
  7.   });

  9.   $(function() {
  10.     $('a').on('click', function() {
  11.       $('a .current').removeClass('current'); /* remove the class from the currently selected */
  12.       $(this).addClass('current'); /* add the class to the newly clicked link */
  13.     });
  14.   });

... and here's the css that I want to launch with the javascript:
  2. a.current{
  3. font-weight:bold;
  4. font-style: italic;
  5. }


Why is this not working? Any suggestions?