JSFiddle - React, Tailwind, and code Playground

HTML

<form>
		<div class="test">
        <div class="hoge-1">
							<input type="checkbox" id="a-1"><label class="label" for="a-1">a-1</label>
							<input type="checkbox" id="a-2"><label class="label" for="a-2">a-2</label>
							<input type="checkbox" id="a-3"><label class="label" for="a-3">a-3</label>
        </div>
				<div class="hoge-2">
							<input type="checkbox" id="b-1"><label class="label" for="b-1">b-1</label>
							<input type="checkbox" id="b-2"><label class="label" for="b-2">b-2</label>
							<input type="checkbox" id="b-3"><label class="label" for="b-3">b-3</label>
        </div>			
		</div>
</form>
<div class="result">
				<section class="a-2 b-1">
          <h2>hoge</h2>
        </section>
        <section class="a-1 b-2">
          <h2>hogehoge</h2>
        </section>
        <section class="a-3 b-3">
          <h2>hogehoge</h2>
        </section>
</div>

JavaScript

$(".test input[type=checkbox]").click(function () { 
	  showResult(); 
	}); 
	function showResult(){ 
	  var showClass = [];
	  $(".test input[type=checkbox]").each(function(){ 
		if($(this).prop('checked')) { 
			showClass.push($(this).prop('id'));
		} 
	  }); 
	  $('.result section').hide(); 
		$.each(showClass, function(i, text){
			 $('.result .'+text).show(); 
		});
	 
	}