Make it possible for a jQuery appended label to toggle a checkbox

I have a list with the following markup:

<div class="container">
    <div class="element">
        <input type="checkbox" id="checkbox1" class="toggler">
        <label for="checkbox1">Toggle +</label>
        <div class="more-info">
            <p>...</p>
        </div>
    </div>
    <div class="element">
        ...
    </div>
</div>

The purpuse is to use pure CSS to make the toggle function, so I use this to hide/show the <div class="more-info">...</div>:

.more-info {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: all .3s ease;
}

.toggler:checked ~ .more-info {
    max-height: 200px;
    opacity: 0;
    overflow: hidden;
}

Under the container, I have a button that will get (in this case it is static) element and append to the container. And this is where I have my problem, the label in the new element won't toggle the checkbox. If I make the checkbox visible and check it directly it works.

I have also made a codepen to illustrate my problem.

Thanks in advance :)