JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.0/jquery.cookie.min.js"></script>
    <div class="selection-wrap">
      <label>
        <input type="radio" name="light-dark-radio" id="theme-schemes-light-radio" value="light" checked>
        Light
      </label>
      <label>
        <input type="radio" name="light-dark-radio" id="theme-schemes-dark-radio" value="dark">
        Dark
      </label>
    </div>
          
 <!-- first div -->
    <div class="selection-wrap" id="theme-schemes-light">
      <a class="theme-scheme-btn color-box bg-blue" id="defaultThemeScheme" href="#">Light 1</a>
      <a class="theme-scheme-btn color-box bg-yellow" href="#">Light 2</a>
    </div>
    
<!-- second div - hidden by default -->          
    <div class="selection-wrap" id="theme-schemes-dark" style="display: none">
      <a class="theme-scheme-btn color-box dark-color-blue" href="#">Dark 1</a>
      <a class="theme-scheme-btn color-box dark-color-yellow" href="#" >Dark 2</a>
    </div>

JavaScript

// toggle extra-theme-schemes color selection div on dark or light choice
  $($.cookie('light-or-dark') + '-radio').click(function(){
    alert( this.value );
  });
  
  if($.cookie('light-or-dark')) {
    //$($.cookie('light-or-dark') + '-radio').attr('checked', true).trigger('click');
    $($.cookie('light-or-dark') + '-radio').attr('checked', true).click();
    } else {
    $('#theme-schemes-dark').hide();
  };

  $('[name=light-dark-radio]').change(function(){
    $('#theme-schemes-light').toggle('medium');
    $('#theme-schemes-dark').toggle('medium');
    // set cookie on toggle state
    $.cookie('light-or-dark', '#theme-schemes-' + this.value, {expires:365, path: '/'});
  })