ASP.NET: javascript works only for 1 CheckboxDropdown and ignores the other

Question

I'm trying to use CheckboxDropdown control (checkboxes inside a dropdownlist) using JavaScript and it worked fine but only for 1 CheckboxDropdown

here is the aspx:

<select id="ddlPassport" class="form-select form-select-sm" aria-label=".form-select-sm example">
    <option>SELECT</option>
    <option value="Y">Leave Request</option>
    <option value="N">Other Request</option>
</select>


<asp:Label ID="lblLeaveReq" runat="server" Text="Leave Name:"></asp:Label>
<asp:TextBox ID="txtLeaveReq" runat="server" class="form-control" ></asp:TextBox>
     
                                                                                <label forecolor="White" style="color: #FFFFFF">Departments</label>
                                                                                
                                                                                    <label class="dropdown-label">Select</label>

                                                                                    
                                                                                        
                                                                                        
                                                                                        <asp:CheckBoxList ID="chkdepts" runat="server" Width="170%">
                                                                                        </asp:CheckBoxList>
                                                                                    
                                                                                

                                                                                 
                                                                                <asp:ExtendedRequiredFieldValidator ID="ExtendedRequiredFieldValidator1" runat="server" ControlToValidate="DropDownCheckBoxes1" ErrorMessage="Required" ForeColor="Red"></asp:ExtendedRequiredFieldValidator>
                                                                            
                                                      

 
 <asp:Label ID="lblOtherReq" runat="server" Text="Request Name:" ></asp:Label>
 <asp:TextBox ID="txtOtherReq" runat="server"  class="form-control"></asp:TextBox>
     
                                                                                <label forecolor="White" style="color: #FFFFFF">Departments</label>
                                                                                
                                                                                    <label class="dropdown-label">Select</label>

                                                                                    
                                                                                        
                                                                                        
                                                                                        <asp:CheckBoxList ID="chkDepts1" runat="server" Width="170%">
                                                                                        </asp:CheckBoxList>
                                                                                    
                                                                                

                                                                                 
                                                                                <asp:ExtendedRequiredFieldValidator ID="ExtendedRequiredFieldValidator2" runat="server" ControlToValidate="DropDownCheckBoxes1" ErrorMessage="Required" ForeColor="Red"></asp:ExtendedRequiredFieldValidator>
                                                                            


                                                  
                                                     
                                                            <asp:ListItem Value="Y" Text="Leave Request" >
                                                               
                                                            </asp:ListItem>
                                                            <asp:ListItem Value="N" Text="Other Request">

                                                            </asp:ListItem>
                                                        </asp:DropDownList>
                                                       

                                                  
 
                                                    

this is the javascript:

   <script>
                         (function ($) {
                             var CheckboxDropdown = function (el) {
                                 var _this = this;
                                 this.isOpen = false;
                                 this.areAllChecked = false;
                                 this.$el = $(el);
                                 this.$label = this.$el.find('.dropdown-label');
                                 this.$checkAll = this.$el.find('[data-toggle="check-all"]').first();
                                 this.$inputs = this.$el.find('[type="checkbox"]');

                                 this.onCheckBox();

                                 this.$label.on('click', function (e) {
                                     e.preventDefault();
                                     _this.toggleOpen();
                                 });

                                 this.$checkAll.on('click', function (e) {
                                     e.preventDefault();
                                     _this.onCheckAll();
                                 });

                                 this.$inputs.on('change', function (e) {
                                     _this.onCheckBox();
                                 });
                             };

                             CheckboxDropdown.prototype.onCheckBox = function () {
                                 this.updateStatus();
                             };

                             CheckboxDropdown.prototype.updateStatus = function () {
                                 var checked = this.$el.find(':checked');

                                 this.areAllChecked = false;
                                 this.$checkAll.html('Check All');

                                 if (checked.length <= 0) {
                                     this.$label.html('Select');
                                 }
                                 else if (checked.length === 1) {
                                     this.$label.html(checked.parent('label').text());
                                 }
                                 else if (checked.length === this.$inputs.length) {
                                     this.$label.html('All Selected');
                                     this.areAllChecked = true;
                                     this.$checkAll.html('Uncheck All');
                                 }
                                 else {
                                     this.$label.html(checked.length + ' Selected');
                                 }
                             };

                             CheckboxDropdown.prototype.onCheckAll = function (checkAll) {
                                 if (!this.areAllChecked || checkAll) {
                                     this.areAllChecked = true;
                                     this.$checkAll.html('Uncheck All');
                                     this.$inputs.prop('checked', true);
                                 }
                                 else {
                                     this.areAllChecked = false;
                                     this.$checkAll.html('Check All');
                                     this.$inputs.prop('checked', false);
                                 }

                                 this.updateStatus();
                             };

                             CheckboxDropdown.prototype.toggleOpen = function (forceOpen) {
                                 var _this = this;

                                 if (!this.isOpen || forceOpen) {
                                     this.isOpen = true;
                                     this.$el.addClass('on');
                                     $(document).on('click', function (e) {
                                         if (!$(e.target).closest('[data-control]').length) {
                                             _this.toggleOpen();
                                         }
                                     });
                                 }
                                 else {
                                     this.isOpen = false;
                                     this.$el.removeClass('on');
                                     $(document).off('click');
                                 }
                             };

                             var checkboxesDropdowns = document.querySelectorAll('[data-control="checkbox-dropdown"]');
                             for (var i = 0, length = checkboxesDropdowns.length; i < length; i++) {
                                 new CheckboxDropdown(checkboxesDropdowns[i]);
                             }
                         })(jQuery);
                     </script>