Changing the value of button when clicked

Question

I am trying to change the color of button when clicked. I don't know what is wrong in this code.

paginationContainer.find("li").on('click', function() {

    var linkNumber = $(this).text();

    $(linkNumber).removeClass('active').addClass('inactive');
    $(this).removeClass('inactive').addClass('active');

});

.active {
    background: yellow
}

.inactive {
    background: red
}

Answer 1

You need to apply the class to the li - not the text, Also you can swapt the classes of active and inactive by using .toggleClasss().

paginationContainer.find("li").on('click', function(){
   $(this).toggleClass('active inactive');
});

Answer 2

are you looking for something like this

HTML

<button class="clickMe">
Button1
</button>
<button class="clickMe">
Button2
</button>
<button class="clickMe">
Button3
</button>
<button class="clickMe">
Button4
</button>

CSS

.clickMe{

  padding:3%;
  background-color:cyan;
  color:white;
}

JS

$('.clickMe').click(function(){
$(this).css('background-color',"green");
});

Working Fiddle