JSFiddle - React, Tailwind, and code Playground

by CJ Juarez

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<button id="b1" class="forb1" onclick="change_class1();">Button 1</button>
<button id="b2" class="forb2" onclick="change_class2();">Button 2</button>

CSS

.forb1{
  background-color: red;
}

.forb2 {
  background-color: yellow;
}

JavaScript

$("#b1").click(function change_class1() {
    if ($("#b1").hasClass("forb1")) {
  		$("#b1").removeClass("forb1").addClass("forb2");
      $("#b2").removeClass("forb2").addClass("forb1");
    }
    else if ($("#b1").hasClass("forb2")) {
      $("#b1").removeClass("forb2").addClass("forb1");
      $("#b2").removeClass("forb1").addClass("forb2");
    }
});

$("#b2").click(function change_class2() {
    if ($("#b2").hasClass("forb2")) {
  		$("#b2").removeClass("forb2").addClass("forb1");
      $("#b1").removeClass("forb1").addClass("forb2");
    }
    else if ($("#b2").hasClass("forb1")) {
      $("#b2").removeClass("forb1").addClass("forb2");
      $("#b1").removeClass("forb2").addClass("forb1");
    }
});