Button Elements not sorting in Firefox-CodePudding

I am currently having some trouble with automatically sorting some buttons by their value in Firefox. This works in Chrome but I'm not sure why it's not working in Firefox. My goal is to have this work for either browser. Any help would be appreciated.

And the code that works in Chrome found from this StackOverflow question:

// Sort Buttons based on their Values.
const buttonContainer = $("#B1CSTButtonContainer")[0];
const sortedButtons = [...buttonContainer.children].sort((buttonA, buttonB) => {
  const value1 = buttonA.value;
  const value2 = buttonB.value;
  if (value1 === value2) {
    return 0;
  } else if (value1 < value2) {
    return -1;
  } else {
    return 0;
  }
});
sortedButtons.forEach(button => buttonContainer.append(button));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="B1CSTButtonContainer" style="border: 2px solid grey; border-radius: 5px; display: inline-block; padding: 2px; width: 100%;">
  <button id="B1CSTERButton"   value="11" style="float: left; margin: 2px;">ER</button>
  <button id="B1CSTCMButton"   value="06" style="float: left; margin: 2px;">CM</button>
  <button id="B1CSTITMAButton" value="08" style="float: left; margin: 2px;">ITMA</button>
  <button id="B1CST3DARButton" value="09" style="float: left; margin: 2px;">3DAR</button>
  <button id="B1CST7DARButton" value="10" style="float: left; margin: 2px;">7DAR</button>
  <button id="B1CSTPRButton"   value="05" style="float: left; margin: 2px;">PR</button>
  <button id="B1CSTPSButton"   value="04" style="float: left; margin: 2px;">PS</button>
  <button id="B1CSTPSOAButton" value="07" style="float: left; margin: 2px;">PSOA</button>
  <button id="B1CSTPTButton"   value="03" style="float: left; margin: 2px;">PT</button>
  <button id="B1CSTECDButton"  value="12" style="float: left; margin: 2px;">ECD</button>
  <button id="B1CSTRESButton"      value="02" style="float: left; margin: 2px;">RES</button>
  <button id="B1CSTWIPButton"      value="01" style="float: left; margin: 2px;">WIP</button>
</div>

CodePudding user response：

simply use .appendChild() method
( and some css too to be readable )

// Sort Buttons based on their Values --- :
const buttonContainer = document.querySelector('#B1CSTButtonContainer');
  
[...buttonContainer.querySelectorAll('button')]
  .map(btn=>({btn, val:  btn.value }))
  .sort((a,b) => a.val - b.val)
  .forEach( elm => buttonContainer.appendChild(elm.btn) )

// -*-*-

#B1CSTButtonContainer {
  border        : 2px solid grey;
  border-radius : 5px;
  display       : inline-block; 
  padding       : 2px;
  width         : 100%;
  }
#B1CSTButtonContainer > button {
  float  : left; 
  margin : 2px;
  }

<div id="B1CSTButtonContainer">
  <button id="B1CSTERButton"       value="11"  > ER   </button>
  <button id="B1CSTCMButton"       value="06"  > CM   </button>
  <button id="B1CSTITMAButton"     value="08"  > ITMA </button>
  <button id="B1CST3DARButton"     value="09"  > 3DAR </button>
  <button id="B1CST7DARButton"     value="10"  > 7DAR </button>
  <button id="B1CSTPRButton"       value="05"  > PR   </button>
  <button id="B1CSTPSButton"       value="04"  > PS   </button>
  <button id="B1CSTPSOAButton"     value="07"  > PSOA </button>
  <button id="B1CSTPTButton"       value="03"  > PT   </button>
  <button id="B1CSTECDButton"      value="12"  > ECD  </button>
  <button id="B1CSTRESButton"      value="02"  > RES  </button>
  <button id="B1CSTWIPButton"      value="01"  > WIP  </button>
  <button id="B1CSTSettingsButton" value="100" > ⚙    </button>
  <button id="B1CSTHelpButton"     value="99"  > ❓   </button>
</div>