JSFiddle - React, Tailwind, and code Playground

HTML

<div id="jacket_text" class="color-blue font-neon desktop_jacket_text">
              <div id="output_top" class="desktop_output_top twolines">Joan</div>
              <div id="output_top_a" class="desktop_output_top_a twolines" style="display:none;">Joan</div>
              <div id="output_top_b" class="desktop_output_top_b twolines" style="display:none;">Joan</div>
              <!-- bottom text -->
              <div id="output_bottom" class="desktop_output_bottom">Didion</div>
              <div id="output_bottom_a" class="desktop_output_bottom_a" style="display:none;">Didion</div>
              <div id="output_bottom_b" class="desktop_output_bottom_b" style="display:none;">Didion</div>
         </div>
         
         
         
         <div id="custom-swatch-container" class="swatch swatch-2 clearfix customization forreal" data-option-index="1" style="display:block;">
          <h3 class="customize-option-title">Font:</h3>	
          <div class="swatch-drop">
				<div class="clearfix"></div>
				<div class="swatch-element swatch-element-1 neon available" data-value="Neon">
					<input id="font-swatch-neon" name="font-option" type="radio" value="Neon" checked> <label for="font-swatch-neon" onclick="changeLinkNeon()">Neon</label>
				</div>
				<div class="swatch-element swatch-element-5 block available" data-value="Block">
					<input id="font-swatch-block" name="font-option" type="radio" value="Block"> <label for="font-swatch-block" onclick="changeLinkBlock()">Block</label>
				</div>
				<div class="swatch-element swatch-element-9 script available" data-value="Script">
					<input id="font-swatch-script" name="font-option" type="radio" value="Script"> <label for="font-swatch-script" onclick="changeLinkScript()">Script</label>
				</div>
				<div class="swatch-element swatch-element-13 space available" data-value="Space">
					<input id="font-swatch-space" name="font-option" type="radio" value="Space"> <label for="font-swatch-space"...

JavaScript

$(document).ready(function() {
$("#font-swatch-neon").click(function() {
        
        $("#jacket_text,#custom-swatch-container").removeClass("font-block font-script font-space").addClass("font-neon");
        if ( $("#jacket_text").is(".color-white,.color-black,.color-silver") && $("#jacket_text").is(".font-block,.font-script,.font-space") ) {
          $("#jacket_text,#custom-swatch-container").removeClass("color-white color-black color-silver").addClass("color-blue");
          $("#color-swatch-blue").prop("checked", true);
          $("#color-swatch-white").prop("checked", false);
          $("#color-swatch-black").prop("checked", false);
          $("#color-swatch-silver").prop("checked", false);
        }else {
        }
        $(".swatch-element.blue").show();
        $(".swatch-element.white").hide();
      });
      
  });