JSFiddle - React, Tailwind, and code Playground

by infatti

HTML

<h4>Make each radio pair effect only closest yes,no divs</h4>
<div class="hide-show"><!-- radio - hide/show -->
  <label>
  <input type="radio" name="radio1" value="yes" checked>
    Yes
  </label>
  <label>
  <input type="radio" name="radio1" value="no">
    No
  </label>
</div><!-- #radio - hide/show -->

<div class="hide-show-yes"><!-- yes -->
yes
</div><!-- #yes -->

<div class="hide-show-no"><!-- no -->
no
</div><!-- #no -->
     
      
      <hr />

<h4>Make each radio pair effect only closest yes,no divs</h4>
<div class="hide-show"><!-- radio - hide/show -->
  <label>
  <input type="radio" name="radio2" value="yes" checked>
    Yes
  </label>
  <label>
  <input type="radio" name="radio2" value="no">
    No
  </label>
</div><!-- #radio - hide/show -->

<div class="hide-show-yes"><!-- yes -->
yes
</div><!-- #yes -->

<div class="hide-show-no"><!-- no -->
no
</div><!-- #no -->

JavaScript

$('.hide-show input').change(function () {
    $(this).closest('.hide-show').next('.hide-show-yes').toggle(this.value == 'yes').next('.hide-show-no').toggle(this.value == 'no');
});
$('.hide-show input:checked').change(); //trigger correct state onload