jQuery : trying to merge 2 functions into only one - issue of overlapping

I did an exclusive checkbox where I have 2 <input> with 2 <button> by <input> ; below the HTML code snippet :

<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>

Everything is working fine with the following functions (to invert color black/white for both PlayerVsComputer and Player1VsPlayer2 type of game).

When mouse is out of the area of button, I did :

   // Restore original state when mouseleave
   $('#PlayerVsComputer').mouseleave(restore);
   // Restore original state when mouseleave
   $('#Player1VsPlayer2').mouseleave(restore);


      function toggle1() {
         buttonsPlayerVsComputer.each(function(index, value) {
         if (!$(value).prop('disabled')) {
           $(value).toggleClass('btn-inverse btn-classic');
         }
       });
       }

       function toggle2() {
         buttonsPlayer1VsPlayer2.each(function(index, value) {
         if (!$(value).prop('disabled')) {
           $(value).toggleClass('btn-inverse btn-classic');              
         }
       });
       }

and when mouse enters into <div> :

    // Flip buttons player vs computer color when mouse is entering
    buttonsPlayerVsComputer.mouseenter(toggle1);
    // Flip buttons player vs computer color when mouse is entering
    buttonsPlayer1VsPlayer2.mouseenter(toggle2);

 function toggle1() {
     buttonsPlayerVsComputer.each(function(index, value) {
     if (!$(value).prop('disabled')) {
       $(value).toggleClass('btn-inverse btn-classic');
     }
   });
   }

   function toggle2() {
     buttonsPlayer1VsPlayer2.each(function(index, value) {
     if (!$(value).prop('disabled')) {
       $(value).toggleClass('btn-inverse btn-classic');
     }
   });
   }

Now, I would like to merge toggle1 and toggle2 functions into unique toogle function. I tried to do :

  // toggle black/white for both types of game 
  function toggle() {
     var element = $(this);
     element.each(function(index, value) {
     if (!$(value).prop('disabled')) {
       $(value).toggleClass('btn-inverse btn-classic');
     }
   });
   }

Following the same way for doing a unique function restore from restore1 an restore2 functions, I did :

// Restore default choice for both types of game
   function restore() {
     var element = $(this);
     element.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');
     }
   }

Unfortunately, this simplification doesn't work, it causes overlapping between buttons, <div> :

you can see the first solution which works ( with toggle1, toggle2, restore1, and restore2) : version working with 2 functions

You can see the other result with trying to use only 2 functions (toggle and restore) but it doesn't work :

version not working with only one function toggle and restore

If someone could tell me where is my error and how to fix it, Regards