title: On sorting a jsp <select> element items vanishes
body: <p>I have two listbox in a .jsp page with Add(+) and Remove(-) buttons in between. Two list boxes are 'Available Items' (left) and 'Selected Items'(right). 'Available Items' list box displays all the available items on page load fetching from DB, and 'Selected Items' listbox displays blank. User can add one item from left to right in 'Selected Items' listbox. </p>
  
  <p>I have written code to move the items from both sides and vice versa. But the problem is when I am clicking <code>'Add'</code> button to move the item from left to right, the item is moved properly to right listbox but the left list ('Available Items') items are getting <code>vanished</code> and reappears only after doing a click event the listbox which is weird from UI devlpment perspective. The same is happening for Remove button click. I hope there is some refresh issue underline. I am posting the codes below. </p>
  
  <p><strong>N.B : I have written a sort method to sort the items in the listbox. I troubleshooted that if I close calling the method sortItemsList() then everything is working fine.</strong></p>
  
  <p>Code for the listbox :</p>
  
  <pre><code> &lt;tr&gt;
      &lt;td&gt;
          &lt;select id="leftItemList" size="8" multiple="multiple" style="height:auto"&gt;&lt;/select&gt;
              &lt;input type="button" name="moveItemsToLeft" id="buttonAddItems" class="selectBoxAddButton checkboxDependent" value="Add &amp;gt;&amp;gt;" /&gt;
              &lt;input type="button" id="buttonRemoveItems" class="selectBoxRemoveButton checkboxDependent" value="&amp;lt;&amp;lt; Remove" /&gt;
          &lt;select id="rightItemList" size="8" multiple="multiple" style="height:auto"&gt;&lt;/select&gt;
      &lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>Corresponding code for sort in javascript that is causing the issue :</p>
  
  <p>Code for adding and removing items:</p>
  
  <pre><code>    $('#buttonAddItems').click(function(){      //Moving items from left to right   
          var elementFrom = document.getElementById('leftItemList');
          var element = document.getElementById('rightItemList');
  
          var len = element.options.length;       
          var elementFromLength = elementFrom.length;
  
          for ( var i = (elementFromLength - 1); i &gt;= 0; i--) {           
              if ((elementFrom.options[i] != null) &amp;&amp; (elementFrom.options[i].selected == true)) {
  
                  var selectedItemLength = $("#leftItemList :selected").length;
                  element.options[len] = new Option(
                  elementFrom.options[i].text,
                  elementFrom.options[i].value);
                  len++;
                  elementFrom.options[i] = null;
              }
          }   
          sortItemsList(); //Commenting this call fixes the problem       
      });
  
          $('#buttonRemoveItems').click(function(){  //Moving items from right to left        
          var element = document.getElementById('rightItemList');
          var elementTo = document.getElementById('leftItemList');
  
          var len = element.options.length;
          var elementFromLength = elementTo.length;
  
          for ( var i = (len - 1); i &gt;= 0; i--) {
              if ((element.options[i] != null) &amp;&amp; (element.options[i].selected == true)) {                
                  elementTo.options[elementFromLength] = new Option(
                  element.options[i].text,
                  element.options[i].value);
                  elementFromLength++;
                  element.options[i] = null;
              }
          }
          sortItemsList(); //Commenting this call fixes the problem       
      });
  
  
          function sortItemsList(){
      var options = $("#leftItemList option"); // Collect options         
      options.detach().sort(function(a,b) {    // Detach from select, then Sort
          var at = $(a).text();
          var bt = $(b).text();         
          return (at &gt; bt)?1:((at &lt; bt)?-1:0); // Tell the sort function how to order
      });
      options.appendTo("#leftItemList");  
  }
  </code></pre>
  
  <p><strong>N.B : The code for sorting that I used is taken from reference whose URL is below. Have tried both Approaches. None of them is working. I do have same '3.4.1/jquery.min.js' as in reference -</strong></p>
  
  <p><a href="https://www.geeksforgeeks.org/how-to-sort-option-elements-alphabetically-using-jquery/" rel="nofollow noreferrer">https://www.geeksforgeeks.org/how-to-sort-option-elements-alphabetically-using-jquery/</a></p>