JSFiddle - React, Tailwind, and code Playground

HTML

<input type="checkbox" id="Abox" data-info-id="infoa">
<label for="Abox"> Checkbox A</label><BR>

<input type="checkbox" id="Bbox"  data-info-id="infob">
<label for="Bbox"> Checkbox B</label><BR>

<input type="checkbox" id="Cbox"  data-info-id="infoc">
<label for="Cbox"> Checkbox C</label><BR>

<input type="checkbox" id="Dbox"   data-info-id="infod">
<label for="Dbox"> Checkbox D</label><BR>
 
  
CHECK AN ITEM ABOVE IT SHOULD APPEAR BELOW<P>
<div style="background-color:silver;">

<div id="infoa">
<input type="checkbox" id="kwd2"  >
<label for="kwd2"> ALPHA</label><BR>
</div>

<div id="infob">
<input type="checkbox" id="fff1">
<label for="fff1"> BETA</label><BR>
</div>

<div id="infoc">
<input type="checkbox" id="aaa">
<label for="aaa"> CHARLIE</label><BR>
</div>

<div id="infod">
<input type="checkbox" id="kwd5"  >
<label for="kwd5"> DELTA</label><BR>
</div>

</div>

CSS

[id^="info"] {
	display: none;
}

JavaScript

document.addEventListener('change', function(e) {
      var id = e.target.getAttribute('data-info-id');
      var checked = e.target.checked;
      if (id) {
          var div = document.getElementById(id);
          if (div) div.style.display = checked ? 'inline' : 'none';
      }
      
  });