unable to select/pick value values on multiselect.

[DataOrg]

I have 2 multiselect input and using below JS to remove if ALL is selected other values will be removed and if other values selected ALL will be removed.
the scenario is working without any issues but i am unable to select values in the 2nd multi-select once the value is reset on the 1st multiselect

 require([
      'splunkjs/mvc',

      'splunkjs/mvc/simplexml/ready!'
  ], function(mvc) {


      function setupMultiInput(instance_id) {

        // Get multiselect

        var multi = mvc.Components.get(instance_id);

        // On change, check selection
        multi.on("change", (selectedValues) => {

          if (selectedValues.length > 1 && selectedValues.includes("*")) {
            var indexOfAll = selectedValues.indexOf("*");

            // If "ALL" was selected before current (more specific) selection, remove it from list

  if (indexOfAll == 0) {
              selectedValues.splice(indexOfAll, 1);
              multi.val(selectedValues);
              multi.render();
            } else {

  // "ALL" was selected last, clear input and leave only "ALL" in it
              multi.val("*");
              multi.render();
            }
          }

        });
      }

      var all_multi_selects = document.getElementsByClassName("splunk-multidropdown");
      for (j = 0; j < all_multi_selects.length; j++) {
        setupMultiInput(all_multi_selects[j].id);
      }

  });`

XML code:

<label>Select </label>
             <fieldForLabel>SiteName</fieldForLabel>

             <fieldForValue>SiteName</fieldForValue>

             <search>

               <query>| inputlookup </query>

             </search>
             <change>
               <condition>

               <unset token="form.Multiselct2"></unset></condition>

             </change>
             <choice value="*">All</choice>

             <valuePrefix>"</valuePrefix>

             <valueSuffix>"</valueSuffix>

             <delimiter>,</delimiter>

           </input>