Is there a way to connect input with buttons similar to the code below, or is it impossible without changing the HTML (unless using JS code)? Please don't critique the HTML code, this is just an example from a website, I'm trying to determine if it's possible to access other nested blocks.
input:checked ~ button{
display: none;
}
<div id="form">
<section class="container">
<form class="form">
<section class="checkbox-control">
<label for="personal-data-checkbox" class="checkbox-border">
<input type="checkbox" id="personal-data-checkbox">
</label>
<label for="personal-data-checkbox" class="checkbox-label">
<span class="consent-message"></span>
</label>
</section>
<section class="checkbox-control">
<label for="cookie-checkbox" class="checkbox-border">
<input type="checkbox" id="cookie-checkbox">
</label>
<label for="cookie--checkbox" class="checkbox-label">
<span> </span>
</label>
</section>
<section class="buttons">
<section class="confirm">
<button class="accept-all-button button">Agree to all</button>
<button class="confirm-button button hidden-button">Confirm</button>
</section>
</section>
</form>
</section>
</div>