<ul id="sammlung_{{rand}}"></ul>

{% if placeholder is not null %}
<p class="d-none" id="no_data_sammlung_{{rand}}">{{placeholder}}</p>
{% endif %}

<script>
    // Einmaliger Aufruf, um zuvor gespeicherte gecheckte Checkboxen in Sammlung anzuzeigen
    jQuery(document).ready(function(){
        var checkboxElements = jQuery("[data-formid = '{{formid}}']").find('input[type="checkbox"]');
        jQuery('#sammlung_{{rand}}').empty();
        for(var i=0;i<checkboxElements.length;i++){
            var elem = checkboxElements[i];
            if(jQuery(elem).is(':checked')){
                var idCurrentElement = jQuery(elem).attr('id');
                var currentElementLabel = jQuery('label[for='+idCurrentElement+']').text();
                jQuery('#sammlung_{{rand}}').append("<li id='list-"+idCurrentElement+"'>"+currentElementLabel+"</li>");
            }
        }

        if(jQuery('#sammlung_{{rand}}').is(':empty')){
            jQuery('#sammlung_{{rand}}').addClass('d-none');
            {% if placeholder is not null %}
            jQuery('#no_data_sammlung_{{rand}}').removeClass('d-none');
            {% endif %}
        }
    });

    jQuery("[data-formid = '{{formid}}']").on('change', function(e){
        var checkboxElements = jQuery("[data-formid = '{{formid}}']").find('input[type="checkbox"]');
        jQuery('#sammlung_{{rand}}').empty();
        for(var i=0;i<checkboxElements.length;i++){
            var elem = checkboxElements[i];
            if(jQuery(elem).is(':checked')){
                var idCurrentElement = jQuery(elem).attr('id');
                var currentElementLabel = jQuery('label[for='+idCurrentElement+']').text();
                jQuery('#sammlung_{{rand}}').append("<li id='list-"+idCurrentElement+"'>"+currentElementLabel+"</li>");
            }
        }

        if(jQuery('#sammlung_{{rand}}').is(':empty')){
            jQuery('#sammlung_{{rand}}').addClass('d-none');
            {% if placeholder is not null %}
            jQuery('#no_data_sammlung_{{rand}}').removeClass('d-none');
            {% endif %}
        }
        else{
            jQuery('#sammlung_{{rand}}').removeClass('d-none');
            {% if placeholder is not null %}
            jQuery('#no_data_sammlung_{{rand}}').addClass('d-none');
            {% endif %}
        }

    });
</script>