Bootstrap Multiselect: Applying limits to selected items in multiple uses

[Adem]

Hello,

I need to use Bootstrap Multiselect more than once with the same class name on the page.
There is a problem with multiple use of only one feature(Depending on the operation to be done with the Select option, the title sections are changed to show and hide, so there are 4 sections.)
When the selected checkbox exceeds the limit, all selected and unselected checkboxes become disabled and a checkbox is no longer interfered with.
As seen in the picture, all checkboxes are disabled.

What changes should be made in the limitation code so that instead of intervening in all fields with the class name, it only intervenes in the selected field that is clicked?

$(document).ready(function() {
    $('.chkveg').multiselect({
        buttonTextAlignment: 'left', // The feature did not work, it may be affected by something else on the page
        nonSelectedText: 'Proje için Uydu Seç!',
        nSelectedText  : "Uydu Seçili",
        buttonWidth: '400px',
        numberDisplayed: 0,
		
		// Limitation code for selected checkboxes
            onChange: function(option, checked) {
                // Get selected options.
                var selectedOptions = $('.chkveg option:selected');
 
                if (selectedOptions.length >= 4) {
                    // Disable all other checkboxes.
                    var nonSelectedOptions = $('.chkveg option').filter(function() {
                        return !$(this).is(':selected');
                    });
 
                    nonSelectedOptions.each(function() {
                        var input = $('input[value="' + $(this).val() + '"]');
                        input.prop('disabled', true);
                        input.parent('.multiselect-option').addClass('disabled');
                    });
                }
                else {
                    // Enable all checkboxes.
                    $('.chkveg option').each(function() {
                        var input = $('input[value="' + $(this).val() + '"]');
                        input.prop('disabled', false);
                        input.parent('.multiselect-option').addClass('disabled');
                    });
                }
            }
			//

    });
});

http://davidstutz.github.io/bootstrap-multiselect/#further-examples

Thank you

[Adem]

Since there are 4 sections, I added 4 codes under each other with different IDs.
Now, instead of disabling all of them, the problem of disabling the selected ones has been resolved, but when the non-selected ones reach the limit, they are disabled, but it also disables the checkboxes in other inactive sections.

Note: the reason why there are three default selected options in these screenshots is because it is the editing page. So, 3 options are selected in the recorded data.

There is no problem in the screenshot below.
The selection limit is 4 options, when 4 options are selected, other checkboxes are disabled. Selected checkboxes can be deselected. This works great.

The screenshot below is the other section with show hide with select option
As seen in the screenshot, the checkboxes that were disabled in the previous section are also disabled in the third and fourth sections.

I’m a newbie in javascript/jquery code
I think it happens in all input[value] checks.
Isn’t there a way to only look at the input[value] of the specified ID?

onChange: function(option, checked) {
	// Get selected options.
	var selectedOptions = $('#uydu_proje option:selected');

	if (selectedOptions.length >= 4) {
		// Disable all other checkboxes.
		var nonSelectedOptions = $('#uydu_proje option').filter(function() {
			return !$(this).is(':selected');
		});

		nonSelectedOptions.each(function() {
			var input = $('input[value="' + $(this).val() + '"]');
			input.prop('disabled', true);
			input.parent('.multiselect-option').addClass('disabled');
		});
	}
	else {
		// Enable all checkboxes.
		$('#uydu_proje option').each(function() {
			var input = $('input[value="' + $(this).val() + '"]');
			input.prop('disabled', false);
			input.parent('.multiselect-option').addClass('disabled');
		});
	}
}