[SOLVED] Jquery multiselect deselect all options except the newly-selected one automatic

Jquery multiselect deselect all options except the newly-selected one automatic

I'm using jquery bootstrap multiselect using this documentation. My scripts looks like this:

  <script id="example">
     $(document).ready(function() {
     $('#demo').multiselect({
      enableClickableOptGroups: true,
      enableCollapsibleOptGroups: true,
     });
  });
  </script>

I had inserted optgroups, in each one there is 4 option.

 <select id="demo" multiple="multiple" >
<optgroup label="Group 1">
  <option value="1-1">Option 1.1</option>
  <option value="2-1">Option 2.1</option>
  <option value="2-2">Option 2.2</option>
  <option value="2-3">Option 2.3</option>
</optgroup>
<optgroup label="Group 111">
  <option value="1-1">Option 1</option>
  <option value="2-1">Option 2</option>
  <option value="2-2">Option 3</option>
  <option value="2-3">Option 4</option>
</optgroup>
<optgroup label="Group 12">
  <option value="1-1">Option 5</option>
  <option value="2-1">Option 6</option>
  <option value="2-2">Option 7</option>
  <option value="2-3">Option 8</option>
</optgroup>
<optgroup label="Group 63">
  <option value="1-1">Option 63.4</option>
  <option value="2-1">Option 63.1</option>
  <option value="2-2">Option 63.2</option>
  <option value="2-3">Option 63.3</option>
</optgroup>

Here is the fiddle : https://jsfiddle.net/etzacv5k/2/

The problem is when i check "Group 1", it is checked, then, when i select "Group 111", the previous one is deselected, and the new one is selected, same for the last group, when i check the last one, all previous ones are deselected. I want it to persist selected when because its multiple choice.

Can someone help me ?

Solution