Revealing options with a checked checkbox is not working uniformly - html

Question

I am a beginner, and I'm building a simple calculator in which there are several options that can be included in the total result. Upon checking a checkbox "front bumper" it will reveal three different options for that front bumper. This is not working the same with all options.
Once the CSS worked for the front bumper checkbox, I copied and pasted for the back bumper and the door handles...but only the front bumper and door handles is actually working, while the back bumper doesn't reveal any of the additional options when checked. The code for all three is identical (save the class names) so I'm not sure why they aren't working the same.
Like I said, I'm a beginner, so please excuse my messy code.
Just for context, the app is to calculate vehicle wrap pricing based on the options, it's my day job so easier to build apps for something I know a ton about already.
<div class="options">
<p>Options</p>
<div class="flexbox-one-a">
<div class="bumpers">
<div class="front-bumper">
<input type="checkbox"id="front-bumper"> <label for="front-bumper">Front Bumper</label>
<div class="reveal-if-active-front">
<input type="radio" name="front-bumper" class="front-standard"><label for="front-standard">Standard</label><br>
<input type="radio" name="front-bumper" class="front-complex"><label for="front-complex">Complex</label><br>
<input type="radio" name="front-bumper" class="front-highlycomplex"><label for="front-highlycomplex">Highly Complex</label>
</div>
</div>
<div class="back-bumper">
<input type="checkbox"id="back-bumper"> <label for="back-bumper">Back Bumper<label>
<div class="reveal-if-active-back">
<input type="radio" name="back-bumper" class="back-standard"><label for="back-standard">Standard</label><br>
<input type="radio" name="back-bumper" class="back-complex"><label for="back-complex">Complex</label><br>
<input type="radio" name="back-bumper" class="back-highlycomplex"><label for="back-highlycomplex">Highly Complex</label>
</div>
</div>
</div>
<div class="mirrors-and-handles">
<div class="mirrors">
<input type="checkbox" id="mirrors"><label for="mirrors">Mirrors</label>
</div>
<div class="door-handles">
<input type="checkbox"id="door-handles"> <label for="door-handles">Door Handles</label>
<div class="reveal-if-active-handles">
<input type="radio" name="door-handles" class="two-handles"><label for="two-handles">2 Handles</label><br>
<input type="radio" name="door-handles" class="four-handles"><label for="four-handles">4 Handles</label><br>
</div>
</div>
</div>
</div>
</div>
.reveal-if-active-front, .reveal-if-active-back, .reveal-if-active-handles {
opacity: 0;
max-height: 0;
overflow: hidden;
}
.options input[type="checkbox"]:checked ~ .reveal-if-active-front {
opacity: 1;
max-height: 100px;
overflow: visible;
}
.options input[type="checkbox"]:checked ~ .reveal-if-active-back {
opacity: 1;
max-height: 100px;
overflow: visible;
}
.options input[type="checkbox"]:checked ~ .reveal-if-active-handles {
opacity: 1;
max-height: 100px;
overflow: visible;
}

Answer 1

You forgot to close back-bumper <label> tag.
<label for="back-bumper">Back Bumper</label>
This is a common problem for beginners.
You can use these online tools to check your HTML code and find out related issues:
HTML Validator / Linter
Closing Tag Checker for HTML5 by Alicia Ramirez