JSFiddle - React, Tailwind, and code Playground

by thomas_david88

HTML

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/js/select2.min.js"></script>
 <div class="catalogue">
                            <label class="height pbottm15">Catalogue</label>
                            <div class="sidebar-dropdown dropdown-select right-check selectedall" id="choose-folder">
                                <label class="dropdown-label text-uppercase">choice</label>
                                <div class="dropdown-list text-uppercase catalogue-list ">
                                    <div class="checkbox custom-control custom-checkbox small">
                                        <input type="checkbox" name="dropdown-group" class="check custom-control-input " data-id-select="1"  id="checkbox-custom1" />
                             <label for="checkbox-custom1" class="custom-control-label" data-id=""> all</label>
                                    </div>
                                    <div class="checkbox custom-control custom-checkbox small">
                                        <input type="checkbox" name="dropdown-group" class="check custom-control-input " data-name="Shop" id="checkbox-custom2" />
                                        <label for="checkbox-custom2" class="custom-control-label" data-id="2"> Shop</label>
                                    </div>
                                    <div class="checkbox custom-control custom-checkbox small">
                                        <input type="checkbox" name="dropdown-group"
                                 class="check custom-control-input " data-name="option2"  id="checkbox-custom3" />
                                        <label for="checkbox-custom3" class="custom-control-label" data-id="3"> option2</label>
                                    </div>
                                    <div class="checkbox custom-control...

JavaScript

function checkboxDropdown(el='', text="Ajouter au(x) dossier(s)") {
    var $el = $(el)

    function updateStatus(label, result, folders) {
        if(!result.length) {
            //label.html(text);
        }
    };

    $el.each(function(i, element) {
        var $list = $(this).find('.dropdown-list'),
            $label = $(this).find('.dropdown-label'),
            $inputs = $(this).find('.check'),
            defaultChecked = $(this).find('input[type=checkbox]:checked'),
            result = [];
        folders = [];
        htmlResult = [];
        htmlResult2 = [];

        updateStatus($label, result);
        if(defaultChecked.length) {
            defaultChecked.each(function () {
                if($(this).parent().parent().hasClass('catalogue-list')) {
                    htmlResult.push('<span>'+$(this).next().text()+'</span>');

                } else {
                    htmlResult2.push('<span>'+$(this).next().text()+'</span>');
                }
                result.push($(this).next().text());
                htmlResult.push('<span>'+$(this).next().text()+'</span>');



                if(el != ".dropdown-select") {
                    $label.html(result.join(", "));
                }else {
                    if($(this).parent().parent().hasClass('catalogue-list')){
                        console.log(htmlResult);
                        $('.catalogue .list-selection').html(htmlResult.join(" "));


                    } else {
                        $('.category .list-selection').html(htmlResult2.join(" "));

                    }

                }

                folders.push($(this).next().attr('data-id'));
            });
        }

        $label.on('click', ()=> {
            $(this).toggleClass('open');
        });

        $inputs.on('change', function() {
            var checked = $(this).is(':checked');
            var checkedText = $(this).next().text();
            var checkedID= $(this).next().attr('data-id');
           ...