JSFiddle - React, Tailwind, and code Playground

HTML

<div class="formhead" id="login1">
    <input name="login" class="flyer checkbox" type="checkbox" value="1" />
        <div style="float:left;">
        <span class="ico"><img  src="http://code.#.de/ico/key.png" /></span>
        </div><div class="cross" style="float:right;"></div>
    <div>
    <h2 class="form">Login f&uuml;r Kunden</h2>
    <span class="mitbestellen_nojq">Du bist bereits Kunde?</span> </div>

</div>

<div class="formbody">
</div>



<div class="formhead" id="reg1">
    <input name="neukunde" class="flyer checkbox" type="checkbox" value="1" />
        <div style="float:left;">
        <span class="ico"><img  src="http://code.#.de/ico/vcard_edit.png" /></span>
        </div><div class="cross" style="float:right;"></div>
    <div>
    <h2 class="form">Anmeldung f&uuml;r Neukunden</h2>
    <span class="mitbestellen_nojq">Werde jetzt Kunde bei uns!</span> </div>

</div>

<div class="formbody">
</div>

CSS

#formhead, .formhead, .formhead_open, #berechnung
{
    font-weight: bold;
    margin-top: 15px;
    width: 400px;
    display: inline-block;
    padding: 5px 10px 6px;
    text-decoration: none;
    -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    border-bottom: 1px solid rgba(0,0,0,0.25);
    position: relative;
    cursor: pointer;
    background-color:#f5dcfc;
    padding: 10px;
}

JavaScript

/// FOLLOWING DOESN'T WORK: thereinafter 

     //beim jquery ausfall
     $(':checkbox').removeAttr('checked');
    $('.formbody').css('display', 'none'); $('.formhead').children('input:checkbox').css('display', 'none'); 
    $('.formbody:eq(0)').css('display', 'inherit'); $('.formhead:eq(0)').children('input:checkbox').attr('checked', 'checked');
    
  
 $('.formhead').bind('click', function() {
    if ($(this).children('input:checkbox').is(':checked')) {
            $(this).children('input:checkbox').removeAttr('checked');
            $(this).next('.formbody').css('display', 'none');
            $(this).children().children('span.mitbestellen').html(' gleich mitbestellen?');
            $(this).children().children('span.ico').html('<img src="http://code.neoq.de/ico/action_add_2.gif" />');
            $(this).children('.cross').html('');
    }  else {
            $(this).next('.formbody').css('display', 'inherit');
            $(this).children('input:checkbox').attr('checked', 'checked');
            $(this).children().children('span.mitbestellen').html(' wird mitbestellt!');
            $(this).children().children('span.ico').html('<img src="http://code.neoq.de/ico/action_check.gif" />');
            $(this).children('.cross').html('<img src="http://code.neoq.de/ico/action_delete.gif" />');

    };
     
     /// FOLLOWING DOESN'T WORK
     /// It work only in one direction; it should switsch instandly
     /// FOLLOWING DOESN'T WORK
     /// FOLLOWING DOESN'T WORK
    
    if ($("#reg1").children('input:checkbox').is(':checked')) {
        $("#login1").children('input:checkbox').removeAttr('checked');
        $("#login1").next('.formbody').css('display', 'none');
        $("#login1").children().children('span.ico').html('<img src="http://code.neoq.de/ico/action_add_2.gif" />');
        $("#login1").children('.cross').html('');


        } 
        
        else {
                if ($("#login1").children('input:checkbox').is(':checked')) {
           ...