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>
  <label class="radio-block">
  <input name="selectterm" class="" value="jito" 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(){
  $('.changeterm').hide();

  $('.pika1').fadeIn(100).delay(100).fadeOut(100);
  $('.pika2').delay(300).fadeIn(100);

  $('.huwa1').fadeIn(1000).delay(1000).fadeOut(1000);
  $('.huwa2').delay(3000).fadeIn(1000);

  $('.jito').fadeIn(1000).delay(1000); 

});


$('input[name=selectterm]').on('change', function() {
  //var targetClass = $(this).val() == "pika1" ? 'pika2' : 'huwa2'; 
  var removeClass = $(this).val() == "pika1" ? 'huwa1 huwa2' : 'pika1 pika2' ? 'jito';
  var addClass = $(this).val() == "pika1" ? 'pika2' : 'huwa2' ? 'jito2';
  $('.changeterm').eq(0).removeClass(removeClass).addClass($(this).val()); 
  $('.changeterm').eq(1).removeClass(removeClass).addClass(addClass);
});