Как присвоить classList только к одному айди, а не ко всем?

При нажатии на жёлтую кнопку она смещается вниз, как и синяя, но мне необходимо, чтобы жёлтая оставалась на месте, а синяя смещалась. Никак не могу понять, почему classList присваивает .active ко всем айди (Если что-то не понятно или не хватает информации, то напишите, я добавлю)

function popi() {
  document.getElementById("menu").classList.toggle('active');
}
.content_toggles {
    position: absolute;
    z-index: 2;
    width: 100px;
    height: 100px;
    background-color: yellow;
    border: none;
    border-radius: 10px;
}

#pop .content_blocks {
    position: absolute;
    z-index: 1;
    width: 100px;
    height: 100px;
    background-color: blue;
    border: none;
    border-radius: 10px;
    left: 200px;
}

#menu.active {
    margin-top: 103px;
}
<div id="menu">
    <input type="button" class="content_toggles" onclick="popi()" \>
</div>
<div id="pop">
    <input type="button" class="content_blocks"\>
</div>


Ответы (0 шт):