JSFiddle - React, Tailwind, and code Playground

HTML

Radio 1:<br/>
<input type="radio" name="radio[1]" value="test" />Test<br/><input type="radio" name="radio[1]" value="test2" />Test2<br/><input type="radio" name="radio[1]" value="test3" />Test3<br/>

Radio 2:<br/>
<input type="radio" name="radio[2]" value="test" />Test<br/><input type="radio" name="radio[2]" value="test2" />Test2<br/><input type="radio" name="radio[2]" value="test3" checked="checked"/>Test3<br/>

CSS

.inputRadioButton {
    background: #123456;
    height: 1em;
    width: 1em;
    display: inline-block;
}

.inputRadioButtonSelected {
    background: #abcdef;
}

JavaScript

$('input:radio').each(function(){
  var $radio = $(this), radioName = $radio.attr('name');
  // check if the radio is shown:
  if ($radio.is(':hidden')) return; 
  
  // create a div
  var $div = $("<div class='inputRadioButton' />");
  
  // store the radio name on the div:
  $div.data('radioName', radioName);
  
  // look for the hidden already being present:
  var $hidden = $('input:hidden').filter(function() { 
    return this.name == radioName; 
  });
  
  if (!$hidden.length) {
    // didn't find the hidden, lets create one and append it to this div:
    $hidden = $("<input type='hidden' name='"+radioName+"' />").val($radio.val());
    $div.append($hidden); 
  }
  
  // if the radio is checked, set the hidden value:
  if ($radio.is(':checked')) {
      $hidden.val($radio.val());
      $div.addClass('inputRadioButtonSelected');
  }
  $div.click(function(){
    $hidden.val($radio.val());
    $(".inputRadioButton").filter(function() {
      return ($(this).data('radioName') == radioName);
    }).removeClass('inputRadioButtonSelected');
    $(this).addClass('inputRadioButtonSelected');
  });
  
  $radio.replaceWith($div);
});