JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://rawgit.com/silviomoreto/bootstrap-select/master/dist/css/bootstrap-select.css">
<script src="https://rawgit.com/silviomoreto/bootstrap-select/master/dist/js/bootstrap-select.js"></script>
<div class="result"></div>
<select class="selectpicker dcc" id="join_person" multiple>

     <optgroup label="GROUP A (Click Me To Select All)">
    <option class="A d" id="1">andy</option>
    <option class="A" id="2">peter</option>
    <option class="A" id="3">amy</option>
</optgroup>
     <optgroup label="GROUP B (Click Me To Select All)">
    <option id="B">group2</option>
    <option class="B" id="4">kelly</option>
    <option class="B" id="5">tim</option>
</optgroup>

</select>

JavaScript

$("li").on('click', function(){
		var base 		= $(this).closest(".bootstrap-select");
		var select 	= base.find("select");

		if(base.length && select.prop("multiple")){ // check if this .dropdown-header is part of bootstrap-select AND multiple or not

			var group 	= $(this).data("optgroup")-1;
			var group2 	= group+1;
			var select 	= $(this).closest(".bootstrap-select").find("select");

			if($(this).hasClass("dropdown-header")){

				if(base.find("li[data-optgroup=" + group2 + "]:not(.selected)").length === 1)
					$(this).closest(".bootstrap-select").find("select > optgroup:eq(" + group + ") > option").prop("selected",false);
				else
					$(this).closest(".bootstrap-select").find("select > optgroup:eq(" + group + ") > option").prop("selected",true);

				select.selectpicker('render');

			}else{
				setTimeout(function() { // set timeout because waiting for some bootstrap-select event done.
					var rs 	= select.mySelect();
					$(".result").text(rs);
				}, 100);
			}
		}
	});

	/* function onchange */
	$.fn.mySelect = function(){ 
		var arr = new Array();
		$(this).find("option").each(function()
		{
			if($(this).is(":selected"))
			{             
				id = $(this).attr("id");
				class_dept = $(this).attr("class");
				if(id == class_dept){
					//do something
				}

				if(arr.indexOf(id) == -1)
				{
					arr.push(id); 
				}
			}
			else
			{
				id = $(this).attr("id");
				arr = jQuery.grep(arr, function(value) {
					return value != id;
				});             
			}
		});
	}