JSFiddle - React, Tailwind, and code Playground

by thomas_david88

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/css/select2.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/js/select2.js"></script>
<div class="sidebar-dropdown dropdown-select right-check list-devoir open" id="getdevoirname" data-ids="">
                                <label class="dropdown-label text-uppercase">SÉLECTIONNER</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" id="devoir1Chap1"> <label for="devoir1Chap1" class="custom-control-label" data-id="devoir1Chap1">  devoir1Chap1 </label></div> </div><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" id="devoir2Chap1"> <label for="devoir2Chap1" class="custom-control-label" data-id="devoir2Chap1">  devoir2Chap1 </label></div> </div><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" id="devoir3Chap1"> <label for="devoir3Chap1" class="custom-control-label" data-id="devoir3Chap1">  devoir3Chap1 </label></div> </div><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" id="devoir4Chap1"> <label for="devoir4Chap1" class="custom-control-label" data-id="devoir4Chap1">  devoir4Chap1 </label></div> </div></div>

CSS

.custom-checkbox .dropdown-select {
    display: inline-block;
    position: absolute;
    background: #fff;
    width: 18%;
}

JavaScript

var iddevoirchekd=[];
$(document).on('click', '#getdevoirname', function() {
iddevoirchekd=[]
    $(this).find('input').each(function() {
        if ($(this).attr('type') == 'checkbox') {
            if ($(this).is(':checked')) {
                var getfinalyname= $(this).attr("id");
                console.log(getfinalyname);
                iddevoirchekd.push(getfinalyname);
            }
        }
    });
    $('#getdevoirname').attr('data-ids', iddevoirchekd);

});