JSFiddle - React, Tailwind, and code Playground

HTML

<!--ラジオボタン-->	
<li class="selectterm" data-label="HuwaPika">
  <div class="label">
  <label for="selectterm">ピカふわ選択</label>
  </div>
  <div class="fields" data-required="no" data-type="radio">
  <label class="radio-block">
  <input name="selectterm" class="" value="pika1" type="radio" checked="checked" >ピカ
  </label>
  <label class="radio-block">
  <input name="selectterm" class="" value="huwa1" type="radio">ふわ
  </label>
  </div>
</li>

<!--ふんわり-->	
<div class="osu">実行</div>
  <div class="changeterm pika1 huwa1">
  <p>１回目</p>
  </div>
  <div class="changeterm pika2 huwa2">
  <p>２回目</p>
</div>

CSS

.osu {
    cursor: pointer;
    position: absolute;
    top: 200px;
    background: #FF6565;
    display: flex;
    justify-content: center;
    align-items: center;
}
.pika1,
.pika2,
.huwa1,
.huwa2 {
  display:none;
}

JavaScript

$(function(){
  var target = "pika";

  $('input[name=selectterm]').on('change', function() {
    target = $(this).val();
  });

  $('.osu').on("click",function(){
    if (target === "pika") {
      $('.pika1').fadeIn(100).delay(100).fadeOut(100);
      $('.pika2').delay(300).fadeIn(100);
    } else {
      $('.huwa1').fadeIn(1000).delay(1000).fadeOut(1000);
      $('.huwa2').delay(3000).fadeIn(1000);
    }
  });
});