when we call element.remove(), element is removed from DOM since and element.isConnected will return false. is there a function that reverse remove method and put the element back into location?

let's say I have three elements: html_area, css_area and js_area. their display are managed individually by html_hider, js_hider, css_hider. when hider is clicked, I need to remove the area from DOM, also modifies container dimension. here's the thing, I want to keep these in order:

1. html
2. css
3. js

when they hide and show (appended or removed) form DOM, I want their sequence to be maintained. I manually coded it as:

html_area.connect = () => container.prepend(html_area);
css_area.connect = () => {
    if(!html_area.isConnected){
        container.prepend(css_area);
    }else if(!js_area.isConnected){
        container.append(css_area);
    }else{
        container.insertBefore(css_area, js_area);
    }
}
js_area.connect = () => container.append(js_area);

html_hider.onclick = () => {
    if(html_area.isConnected){
        html_hider.classList.add('hide');
        html_area.remove();
    }else{
        html_hider.classList.remove('hide');
        html_area.connect();
    }
    aMode();
}
css_hider.onclick = () => {
    if(css_area.isConnected){
        css_hider.classList.add('hide');
        css_area.remove();
    }else{
        css_hider.classList.remove('hide');
        css_area.connect();
    }
    aMode();
}
js_hider.onclick = () => {
    if(js_area.isConnected){
        js_hider.classList.add('hide');
        js_area.remove();
    }else{
        js_hider.classList.remove('hide');
        js_area.connect();
    }
    aMode();
}

not robust and will be extremely complicated when elements and hiders pair more than 3. is there a way to reverse the remove method and put the element back in its original location?