I have detached a div and want to re-attach it when a certain requirement has been met.

Here's the code so far:

let armor,
    armorcontainer = $(".hud-status"),
    armorhud = $(".hud-armor");

let stress,
    stresscontainer = $(".hud-status"),
    stresshud = $(".hud-stress");

if (data.armor == 0 || data.armor < 1) {
    armor = armorhud.detach();
} else {
    armorcontainer.append(armor);
}

if (data.stress == 0 || data.stress < 1) {
    stress = stresshud.detach();
} else {
    stresscontainer.append(stress);
}

With this code, not only doesn't it go away, but all the other hud divs are visible too, except the Armor hud, that one is indeed gone.

Any help will be appreciated.