JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    <a href="#">show forms</a>
    <br /><br />
    
    <form action="#" method="post" class="activate-share">
        <h1>this is form 1 and no other content should be shown</h1>
      
        <input type="checkbox" class="activate-share" value="1" />       
        
        <div class="hidden-share">I should be hidden</div>
    </form>
    
    <br /><br />
    
    <form action="#" method="post" class="activate-share">
        <h1>This is form 2 and other content should be shown</h1>
        
        <input type="checkbox" class="activate-share" checked="checked" value="1" />
        <div class="hidden-share">I should be shown </div>
    </form>
</html>

CSS

form{
   display:none;   
}

JavaScript

$(document).ready(function(){
    
    $('a').click(function(){ $('form').show(); });
    
    $('.activate-share input[type=checkbox]').change(function(){             
        if($(this).is(':checked')){
            $(this).parent().find('.hidden-share').fadeIn();    
        }else{
            $(this).parent().find('.hidden-share').fadeOut();    
        }
    });
    
    $('.activate-share input[type=checkbox]').trigger('change');    
    
});