Hidden conditional fields using only html and css in a form

Hi, I’m trying to create a form with hidden fields to pop up when a checkbox is checked. I want to have a how “How many?” field pop up if a pet type is selected. It only seems to work when “Cat” is selected, but not any other animals. Can anybody tell me what is wrong in my code? I would greatly appreciate it, it’s driving me crazy. Below is the link to my survey.

https://codepen.io/mitzic42/pen/OJRQLQJ

In short: ~ matches all .conditional elements after #foo:not(:checked).
Solution would be to wrap groups in e.g. <div>

Or to use the + selector instead of ~:

<label for="input-1-a">input 1</label>
<input class="first-input" id="input-1-a" type="checkbox">

<label class="hidden"><input id="input-1-b" type="checkbox">hidden-1</label>



<label for="input-2-a">input 2</label>
<input class="first-input" id="input-2-a" type="checkbox">

<label class="hidden"><input id="input-2-b" type="checkbox">hidden-2</label>

Then one CSS rule for all inputs:

.hidden {
  display:none;
}
.first-input:checked + .hidden {
  display:block;
}