JSFiddle - React, Tailwind, and code Playground

by soniii

HTML

<input name="" type="checkbox" id="chk1" value="">chekme1
<input name="chk2" type="checkbox" id="chk2" value="">checkme2
<input name="chk3" type="checkbox" id="chk2" value="">checkme2
<p id="sb1">Checkbox content one</p>
<p id="sb2">Checkbox content two</p>
<p id="sb3">Checkbox content two</p>

JavaScript

$(document).ready(function()
   {
          //hide all contents
          $('p[id^=sb]').hide();

       $('input[id^=chk]').change(function(){

          // get checkbox index
          var index = $(this).attr('id').replace('chk','');
          //show respective contents
          if($(this).is(':checked'))
            $('#sb'+index).show();
          else
            $('#sb'+index).hide();
       });
    
    });