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">
  <p>１回目</p>
  </div>
  <div class="changeterm pika2">
  <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

$('.osu').on("click",function(){
    $('.pika1').fadeIn(100).delay(100).fadeOut(100);
    $('.pika2').delay(300).fadeIn(100);
  });

  $('.osu').on("click",function(){
    $('.huwa1').fadeIn(1000).delay(1000).fadeOut(1000);
    $('.huwa2').delay(3000).fadeIn(1000);
  });

$('input[name=selectterm]').on('change', function() {
    $('.changeterm').removeClass('pika1 huwa1').addClass($(this).val());  
  });

$('input[name=selectterm]').on('change', function() {
    $('.changeterm').removeClass('pika2 huwa2').addClass($(this).val());    
  });