Changing svg shape color on checkbox click

I would like to change the fill color of an svg shape when a checkbox is clicked. I have this working, however if I wrap the checkbox input in a div tag it no longer works.

#circles {
  fill: #00ffff;
}

#circ-toggle .toggler:checked~#circles .circ1 {
  fill: #000000;
  fill-opacity: 0.3;
}

<div id="circ-toggle" class="toggle">
  <input type="checkbox" id="toggle-1" class="toggler">
  <label for="toggle-1" class="btn-toggle">Change Color</label>
</div>

<div id="circles">
  <svg viewBox="0 0 40 30">
        <g>
            <circle class="circ1" cx="1" cy="1" r="1" />
            <circle class="circ2" cx="3" cy="1" r="1" />
        </g>
    </svg>
</div>