Handle Select All and Deselect All option of Bootstrap Multi select Dropdown List

I had added 2 bootstrap multi select dropdownlist in my HTML Page.

#drop1

<select multiple data-style="bg-white rounded-pill px-4 py-3 shadow-sm " class="selectpicker w-100" 
  id="drop1" data-actions-box="true">
  <option>Val1</option>
  <option>Val2</option>
  <option>Val3</option>
</select>

#drop2

<select multiple data-style="bg-white rounded-pill px-4 py-3 shadow-sm " class="selectpicker w-100" 
  id="drop2" data-actions-box="true">
  <option>Val11</option>
  <option>Val22</option>
  <option>Val33</option>
</select>

Here i set 'data-actions-box' to true for enable Select All And Deselect All option in my dropdown list. When i click on the select all option , it works fine.I want to toggle button as select all and deselect all.

For implementing the said thing i had add the following event in my page

$(".bs-select-all").on('click', function () {

  $(".bs-deselect-all").css({
    "display": "block"
  });
  $(".bs-select-all").css({
    "display": "none"
  });
});
$(".bs-deselect-all").on('click', function () {
  $(".bs-select-all").css({
    "display": "block"
  });
  $(".bs-deselect-all").css({
    "display": "none"
  });
});

Here the bs-select-all is the class name of select/deselect all button used in bootstrap multiselect(I found it in bootstrap-select.js file).But the problem is when i clicked on the Select All button of first dropdown, both dropdown's buttons will changed to deselct all.