How to highlight menu button?

Question

I need to highlight menu button when selecting menu item. if i select menu item then need to apply current class to (li).

This is what i have tried.

Here is HTML,

  <ul>
     <li class="current"><a href="#">HOME</a></li>
     <li><a href="#">SERVICE</a></li>
     <li><a href="#">ABOUTUS</a></li>
     <li><a href="#">PROFILE</a></li>
     <li><a href="#">CONTACTUS</a></li>
  </ul>

Here is Jquery,

var opener = {
  init:function()  { 
         this.menuselection();
   },
   menuselection:function(){
    $('ul li a').on('click', function (){
        $('ul li').addClass('current');
    });
   }
}
opener.init();

Here is CSS,

.current a {
  color: #03c9a9;
}
a,
a:active,
a:focus {
  color: #fff;
}
a,
a:hover,
a:active,
a:focus {
  outline: 0;
  border: 0;
  text-decoration: none;
  color: #fff;
}

Demo

Answer 1

Use this, small correction in prev comment

 $('ul li a').on('click', function (){
       $('ul li a').removeClass('current');
        $(this).addClass('current');
    });

Answer 2

Use $(this) to get the current element and closest('li') to get the li

var opener = {
  init:function()  { 
         this.menuselection();
   },
   menuselection:function(){
    $('ul li a').on('click', function (){
        $(this).closest('li').addClass('current');
    });
   }
}

Otherwise, $('ul li') will add the class to all li elements

Update

if i select $('ul li') , then apply current class then i need to remove all other current class if applied from other li tags.

Before adding the class to $(this).closest('li'), do

$('ul li').removeClass('current');