JQuery can't switch classes properly for a theme customizer

I've got 3 css themes, each change the page to the specified theme. The first 2 are preset classes and they work fine when switching between each of them. The third is a custom theme that takes user's choices and creates it.

There are 3 issues resulting from the 3rd theme:

1. I have to click the submit button twice in order for the theme to actually take effect.
2. When the custom theme is applied, I can't really switch back to either of the other 2 themes. I can however constantly change the values for the third theme and apply them (after clicking twice)
3. The hover attribute is broken, once an element is hovered over it doesn't return to its normal form

Here's the jquery code:

$(document).ready(function(){
$("#b1").click(function(){
  $("body").removeClass("body2 body3").addClass("body1");
  $(".themes").removeClass("theme2 theme3").addClass("theme1");
  $(".txts").removeClass("txt2 txt3").addClass("txt1");
})

$("#b2").click(function(){
  $("body").removeClass("body1 body2").addClass("body2");
  $(".themes").removeClass("theme1 theme3").addClass("theme2");
  $(".txts").removeClass("txt1 txt3").addClass("txt2");
})

var vBack
var vColor
var cFont
var cBack;
var cColor;

$("#b3").click(function(){ 
  vBack= $("#op1").val();
  vColor= $("#op2").val();
  cFont= $("#op3").val();

  switch(vBack) {
      case('blue'):
      cBack= "rgb(80, 160, 200)";
      break;
      case('red'):
      cBack= "rgb(250, 70, 70)";
      break;
      case('yellow'):
      cBack= "rgb(250, 250, 130)";
      break;
  }

  switch(vColor) {
      case('purple'):
      cColor= "rgb(120, 10, 150)";
      break;
      case('orange'):
      cColor= "rgb(250, 180, 50)";
      break;
      case('turquoise'):
      cColor= "rgb(0, 250, 250)";
      break;
  }

  $(".body3").css({"background": cBack, "color": cColor});

  $(".theme3").css({"border": 0, "outline": 0, "background": cColor, "color": cBack, "font-family": cFont});

  $(".theme3").hover(function() {
    $(this).css({"background": cBack, "color": cColor, "font-family": cFont, "box-shadow": "0 0 0 2px " +cColor});
  });

  $(".txt3").css({"color": cColor, "font-family": cFont});

  $("body").removeClass("body1 body2").addClass("body3");
  $(".themes").removeClass("theme1 theme2").addClass("theme3");
  $(".txts").removeClass("txt1 txt2").addClass("txt3");
  })
})

You can test the mentioned issues and read the full code via the link to the codepen

EDIT: Fixed the hover issue