jQuery - text-decoration underline toggle

Question

I'm trying to write a text-decoration toggle.

When I clicked the link, the link should be underlined and if I clicked it a second time the link shouldn't be underlined. It also should toggle if eg the first link was clicked once, then eg the third one is clicked, the first link shouldn't be underlined etc.

jQuery Code:

 $(".underlinetoggle").click(function () {
     if($(".underlinetoggle").css('text-decoration', 'none')) {
         $(".underlinetoggle").css('text-decoration', 'underline');
     }
     else if($(".underlinetoggle").css('text-decoration', 'underline')){
         $(".underlinetoggle").css('text-decoration', 'none');
     }
 });

HTML:

<a class="underlinetoggle-one">Link to toggle 1</a>
<a class="underlinetoggle-two">Link to toggle 2</a>
<a class="underlinetoggle-three">Link to toggle 3</a>

CSS:

.underlinetoggle {
    text-decoration: none;
    color: orange;
}

Sorry if I done a quite hard mistake, because I'm new to jQuery/JavaScript. I'll hope there's a way to do this. Thanks for taking the time to answer to my question.

Answer 1

You can write a bit of css for this like bellow

.underline{
    text-decoration:underline;
}

And this much script using starts with selector

$("a[class^='underlinetoggle']").click(function () {
  $(this).siblings().removeClass('underline');
  $(this).toggleClass('underline');
});

UPDATED DEMO

Answer 2

Try this is working as you want. please like if it's what you want.

$(".anchorToggle").click(function () {
    if($(this).css('text-decoration')=="none"){
        $(this).css('text-decoration', 'underline');
    }
    else
        $(this).css('text-decoration', 'none');
});

see fsfiddle link http://jsfiddle.net/gaurav22031987/2c5vbq1q/7/