JSFiddle - React, Tailwind, and code Playground

HTML

GROUP 1<BR>
<input type="radio" id="abc1" name="abc1"  onclick="showabc('content1',1);"/>
<label for="abc1"> Yes </label>
<input type="radio" id="abc2" name="abc1"  onclick="showabc('content1',0);"/>
<label for="abc2"> No </label>
<div id="dpabc1" class="content1">
<H4>Content 1 is dimmed</H4>
</div>

GROUP 2<BR>
<input type="radio" id="abc3" name="abc2"  onclick="showabc('content2',1);"/>
<label for="abc3"> Yes </label>
<input type="radio" id="abc4" name="abc2"  onclick="showabc('content2',0);"/>
<label for="abc4"> No </label>
<div id="dpabc7" class="content2">
<H4>Content 2 is dimmed</H4>
</div>

GROUP 3<BR>
<input type="radio" id="abc5" name="abc3"  onclick="showabc('content3',1);"/>
<label for="abc5"> Yes </label>
<input type="radio" id="abc6" name="abc3"  onclick="showabc('content3',0);"/>
<label for="abc6"> No </label>
<div id="dpabc9" class="content3">
<H4>Content 3 item 1 in its own div</H4>
</div>
<div id="dpabc11" class="content3">
<H4>Content 3 item2 in its own div</H4>
</div>

CSS

[id^="dp"] {
	opacity: 0.5;
}

JavaScript

function showabc(cssClass,makeBold) {
    var elements = document.getElementsByClassName(cssClass);
    var opacity = 1.0;
    if (makeBold == 0) {
        opacity = 0.5;
    }
    for (var i = 0; i < elements.length; i++) {
        elements[i].style.opacity = opacity;
    }
  }