JSFiddle - React, Tailwind, and code Playground

by ysis81

HTML

<div id="PlayerVsComputer" class="checkbox">                                        
  <label><input type="checkbox" class="game">
   <div class="btn-group" role="group"> 
    <button type="button" class="btn btn-inverse btn-xs">Player</button>             
    <button type="button" class="btn btn-classic btn-xs">Computer</button>           
   </div>
  </label>
 </div>
 <div id="Player1VsPlayer2" class="checkbox">                                        
  <label><input type="checkbox" class="game">
   <div class="btn-group" role="group">
    <button type="button" class="btn btn-inverse btn-xs">Player 1</button>           
    <button type="button" class="btn btn-classic btn-xs">Player 2</button>           
   </div>
  </label>
 </div>

CSS

.btn-classic {
  color: black;
  background-color: white;
  }
     
.btn-inverse {
  color: white;                                                                          
  background-color: black;
  }

JavaScript

// Buttons for player vs computer
   var buttonsPlayerVsComputer = $('#PlayerVsComputer .btn');
   // Buttons for player1 vs player2
   var buttonsPlayer1VsPlayer2 = $('#Player1VsPlayer2 .btn');
   // Set default menu
   setDefaultMenu();
   
   // Flip buttons player vs computer color when mouse is entering                       
   buttonsPlayerVsComputer.mouseenter(function toggle(this) {
     $(this).each(function(index, value) {
     if (!$(value).prop('disabled')) {
       $(value).toggleClass('btn-inverse btn-classic');
     }
   });
   });
                                             
   // Flip buttons player vs computer color when mouse is entering                       
   buttonsPlayer1VsPlayer2.mouseenter(function toggle(this) {
     $(this).each(function(index, value) {
     if (!$(value).prop('disabled')) {
       $(value).toggleClass('btn-inverse btn-classic');
     }
   });
   });
   
   // Restore original state when mouseleave                                             
   $('#PlayerVsComputer').mouseleave(function restore(this) {
     $(this).each(function(index, value) {
     if (!$(value).prop('disabled')) {
       element.eq(0).removeClass('btn-classic').addClass('btn-inverse');
       element.eq(1).removeClass('btn-inverse').addClass('btn-classic');
     }
   });
   });                                             
   // Restore original state when mouseleave                                             
   $('#Player1VsPlayer2').mouseleave(function restore(this) {
     $(this).each(function(index, value) {
     if (!$(value).prop('disabled')) {
       element.eq(0).removeClass('btn-classic').addClass('btn-inverse');
       element.eq(1).removeClass('btn-inverse').addClass('btn-classic');
     }
   });
   });
   
   // Disable click on buttonsPlayerVsComputer                                           
   $('#PlayerVsComputer .btn').on('click',function() {                                   
     $(this).each(function(index, value) {         ...