Pytanie Usunięcie klasy po ponownym kliknięciu w button

Siemano, może wy sobie poradzicie z moim problemem. Mianowicie w JS i Jquery dopiero raczkuję, napisałem sobie nubski skrypcik, który po kliknięciu w button nadaje mu klasę poprzez addClass(). I chcę, żeby po ponownym kliknięciu w niego, tą klasę usunęło. Tworzę tutaj kombinacje alpejskie i w żaden sposób nie chce to śmigać. Pomożecie?
 

<style>

.dupa {
background: #eaeaea;
color: #222;
}

</style>

<script>
$(document).ready(function(){
    $("button").click(function(){
        $(this).addClass("dupa");
    });
});

</script>

<div id="buttons">
<button id="like">Like</button>
</div>

var action = 1;

$("button").on("click", addNewClass);

function addNewClass() {
    if ( action == 1 ) {
        $("button").addClass("dupa");
        action = 2;
    } else {
        $("button").removeClass("dupa");
        action = 1;
    }
}

.dupa {
background: #7FFFD4;
color: #222;
}

lub krócej

$("button").on("click", function(){
  $(this).toggleClass("dupa");
})

lub

var action = 1;
var button = document.getElementById("like");

button.addEventListener("click", function(){
  if ( action == 1 ) {
       button.classList.add("dupa");
       action++;
    } else {
       button.classList.remove("dupa");
       action = 1;
    }
})

27 minut temu, Tor napisał:

var action = 1;

$("button").on("click", addNewClass);

function addNewClass() {
    if ( action == 1 ) {
        $("button").addClass("dupa");
        action = 2;
    } else {
        $("button").removeClass("dupa");
        action = 1;
    }
}

Cholernie dzięki za pomoc, rzecz w tym, że żaden z tych kodów mi nie działa, gdzieś musi być kruczek.

To musi działać:

$(document).ready(function(){
    $("button").click(function(){
        $(this).toggleClass("dupa");
    });
});

Proponował bym zmienić ten styl np:

.dupa {
color: #fff;
}

Będzie bardziej widoczne

33 minuty temu, cantoro napisał:

To musi działać:

Faktycznie, śmiga - doszukałem się co prawda wcześniej tego obiektu w dokumentacji, aczkolwiek myślałem, że służy on głównie do ukrycia klasy. A istnieje jeszcze możliwość dodania do tego innerHTML'a, tak żeby również zmieniał się po kliknięciu pierwszy i drugi raz?

Z JS korzystam od święta . Proponuje jakieś warunki np:

$(document).ready(function(){
    $("button").click(function(){
    		if($(this).hasClass("dupa")) $(this).removeClass();
        else $(this).addClass("dupa");
    });
});