Toggle switch not working for elements added dynamically by Freemarker

[Anakin]

I created created a toggle switch demo with couple of elements. Those elements were however added dynamically by Freemarker - i.e. values of attributes like id for<input type="checkbox" ... id=""> and value of atribute for in <label for=""> were automatically filled in by Freemarker.

The problem is my toggle switch buttons are not working i.e. when I click on them nothing happens.

I really don't know what is the reason behind that all, but I tried to add one element manually i.e. without using Freemarker and suprisingly this manually added toggle switch worked FINE. But I still don't understand why are toggle switch buttons not working for elements added via Freemarker.

Here is my .FTL:

<div class="os_subscribe-wrap">
    <!-- This element below was added manually for testing -->
    <span class="os_section-name">TEST</span>
    <input type="checkbox" class="os_section-check" name="test" id="test" />
    <label class="os_section-slider" for="test"></label>

    <!-- These elements below will be added automatically by Freemarker -->
    <#list tags as tag>
          <#if tag.hasId??>
               <span class="os_section-name">${tag.text}</span>
               <input type="checkbox" class="os_section-check" id="${tag.text}" />
               <label class="os_section-slider" for="${tag.text}"></label>              
          </#if>
    </#list>
</div>

Here is CSS:

            .os_subscribe-wrap {
                width: 300px;
                margin: 10px auto;
                text-align: center;
                font-family: 'Source Serif Pro',Arial,'Liberation Sans',Helvetica,'sans serif';
            }

            .os_section-name {
                line-height: 30px;
                float: left;
                text-align: left;
                width: 200px;
            }

            input.os_section-check {
                height: 0;
                width: 0;
                opacity: 0;
            }

            .os_section-slider {
                display: inline-block;
                position: relative;
                box-shadow: inset 0 0 0px 1px #d5d5d5;
                text-indent: -5000px;
                height: 30px;
                width: 50px;
                border-radius: 15px;
                cursor: pointer;
            }

            .os_section-slider:before {
                content: "";
                position: absolute;
                display: block;
                height: 30px;
                width: 30px;
                top: 0;
                left: 0;
                border-radius: 15px;
                background: rgba(19, 191, 17, 0);
                -moz-transition: .25s ease-in-out;
                -webkit-transition: .25s ease-in-out;
                transition: .25s ease-in-out;
            }

            .os_section-slider:after {
                content: "";
                position: absolute;
                display: block;
                height: 30px;
                width: 30px;
                top: 0;
                left: 0px;
                border-radius: 15px;
                background: white;
                box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2), 0 2px 4px rgba(0, 0, 0, 0.2);
                -moz-transition: .25s ease-in-out;
                -webkit-transition: .25s ease-in-out;
                transition: .25s ease-in-out;
            }

            input.os_section-check:checked + .os_section-slider:before {
                width: 50px;
                background: #13bf11;
            }

            input.os_section-check:checked + .os_section-slider:after {
                left: 20px;
                box-shadow: inset 0 0 0 1px #13bf11, 0 2px 4px rgba(0, 0, 0, 0.2);
            }