splitting and merging Ranges array in javascript
I'll go over some of the basics

let HMID = parseInt(document.getElementById("mySelect").value);


what should HMID be? Aside from being a number, I don't know what it is. And the only reason I know it's a number is because it's the value of parseInt. Looking at how it's used doesn't shed any light. You should name the variable something more descriptive.

Speaking of naming things more descriprive - mySelect is a really bad name, too. Part of why I don't know what HMID is, is because it's the value of something with the non-descriptive ID of mySelect. The myX naming convention is fine when prototyping but you really need to go with descriptive names upon finishing your code.

Echoing the same "descriptive names needed" sentiment for onSelect and onSelectAdd. What do they do? One is executed on select which...doesn't tell me much. The other...adds stuff on select? It's not clear. Somewhat better names would be 


onSelect -> removeItemFromRange
onSelectAdd -> addRemovedToRange


I'm not great at naming things but I'd err on the side of verbose but descriptive rather than short but unclear. If you can have something shorter, feel free to use that. As it stands, the names aren't good.

You are better off adding the event listeners via element.addEventListener rather than in the HTML. That way, you keep the HTML clear of logic - it's all contained in your JavaScript. As an added benefit, you can attach more event listeners that do other stuff without changing these functions. Here is an example



let button = document.getElementById("buttonWithMultipleClickListenersExample"); //told you I'm not good at naming things...

button.addEventListener("click", sayFoo);
button.addEventListener("click", sayBar);

function sayFoo() {
  console.log("foo");
}

function sayBar() {
  console.log("bar");
}
&lt;button id="buttonWithMultipleClickListenersExample"&gt;Click Me&lt;/button&gt;




Two different event listeners are attached for the click event and they can do two completely separate things. If sayBar() is altered or even a sayBaz() is added, we don't need to change anything else, whereas if we define the click handler in the HTML, we have to change that function with every alteration needed.