Need to change the background color of a button on click using Javascript or jquery?

Question

I have 2 buttons with class df-button and df-web-design - i wish to change one any of these buttons background color meaning the background should only be changed of the clicked button itself and then when we click on the other button the background should be return to default. My choice is to use Jquery - Something like an active tab item on click-

<script>
$(document).ready(function(){
  $("button").click(function(){
    $(".df-web-design").addClass("df-button-active");
    $(".df-button").removeClass("df-button-active");
  });
});
</script>

.df-button-active {
background-color: green;
color: white;
transition: all 0.5s ease;
}

<a class="df-button" href"#">All</a>
<a class="df-web-design" href"#">All</a>

Since this is a page builder in wordpress so im using page css or a code snippet like this-

Is there something im missing as its not working?

Im kinda a new bie in JS so do pardon my inexpertise. Much appreciated and THanks in advance.

Answer 1

Just use something like this. Lean more here https://api.jquery.com/click/.

  $(".df-button").click(function(){
    $(this).addClass("df-button-active");
  });
  $(".df-web-design").click(function(){
    $(".df-button").removeClass("df-button-active");
  });

https://jsfiddle.net/e95xrtjL/1/