JSFiddle - React, Tailwind, and code Playground

HTML

<div id="box1">1</div>
<div id="box2">2</div>

<input type="radio" id="r1" name="myRadios" onchange="handleChange(event);" onmousedown="handleMouse(event)" value="1" />

<input type="radio" id="r2" name="myRadios" onchange="handleChange(event);" onmousedown="handleMouse(event)" value="2" />

CSS

#id1,#id2{
  display:none;
}

JavaScript

handleChange = function(e) {
  console.log("checked value " + e.currentTarget.value);
}


handleMouse = function(e) {
  var radios = document.getElementsByName("myRadios");
  var val;
  for (var i = 0; i < radios.length; i++) {
    if (radios[i].checked) {
      val = radios[i].value;
      document.getElementById("box1").style.display="none";
      document.getElementById("box2").style.display="block";
    }else{
     document.getElementById("box2").style.display="none";
      document.getElementById("box1").style.display="block";
    }
  }

}