Inconsistency of jQuery toggle function when works with input checkbox

I have a problem with the jquery animation toggle when triggered by some input checkboxes. Here's the page if you want to see it in action: http://ift.tt/2geaj2m

MY HTML (with some PHP)

<label class="condetails">Meat &amp; Cheese Trays</label>
 <label class="tray-items">
    <input type="checkbox" class="showHidetwo" value="show">Executive Tray
    <label class="hideShowtwo"><input type="checkbox" value="hide">Serves 10–15 people ($45.00)</label>
    <select class="dropstwo" name="Executives">
        <option selected value> -- How Many Trays? -- </option><?php
        for ($i=0; $i<=10; $i++)
        {
            ?>
            <option value="<?php echo $i;?>"><?php echo $i;?></option>
            <?php
        }
        ?>
    </select>
    <label class="hideShowthree"><input type="checkbox" value="hide">Serves 20–25 people ($62.00)</label>
    <select class="dropsthree" name="Executivel">
        <option selected value> -- How Many Trays? -- </option><?php
        for ($i=0; $i<=10; $i++)
        {
            ?>
            <option value="<?php echo $i;?>"><?php echo $i;?></option>
            <?php
        }
        ?>
    </select>
</label>

I'm creating a form that, when compiled, sends an order (for a bakery shop). The user, by selecting a box, must be able to access a further selection, two others checkboxes, which, as the last step, have a drop-down selection to define a quantity.

Unfortunately, the second selection doesn't always work because the checkboxes, if either selected or if selected too fast, hide the third selection (they do not work consistently).

Here's my script:

JQUERY:

jQuery(".showHidetwo").click(function() {
    jQuery(this).siblings('.hideShowtwo, .hideShowthree').toggle();
});
jQuery(".hideShowtwo").click(function() {
    jQuery(this).siblings('.dropstwo').toggle();
});
jQuery(".hideShowthree").click(function() {
    jQuery(this).siblings('.dropsthree').toggle();
});

CSS:

.hideShow {
    display: none;
    margin-left: 4px;
    font-size: 14px;
    font-weight: bold;
    color: #002b55;
    padding: 0;
}
.hideShowtwo, .hideShowthree {
    display: none;
    margin-left: 4px;
    font-size: 14px;
    font-weight: bold;
    color: #002b55;
    padding: 0;
}
.dropstwo, .dropsthree {
    display: none;
}

Any suggestion about this behavior?