Проблема в z-index блоков .menu-body
Они имеют одинаковый в z-index, но фактически следующий в потоке будет имеет его выше...
Подробнее протестируйте наследование z-index элементов, "там не все так однозначно")))
Божечки!!! Это неведомая плавающая "штука", называется - floating label. Что нужно сделать.
1. Заходим на Кодпен
2. Вбиваем в поиск "floating label"
3. Выбираем что Вам угодно, на чистом js, jquery, react, vue, angular, без скриптов...
У меня как-то проще получилось... Я всегда так делаю, тоглю класс. А все стили в css, зачем описывать через js не понимаю... https://codepen.io/hesrun/pen/pOpMVe
Попробуйте сделать таймаут на добавление класса.
Относительно недавно тоже встретился с такой проблемой, понял что это какой-то баг, внятного ответа не нагуглил, и костыль с таймаутом решил мою проблему. https://codepen.io/hesrun/pen/OzJxdP - похожая ситуация...
На свг очень просто сделать такую штуку... Так же можно обернуться каждый элемент, и нумерация вставить HTML, анимация подключать классом через js... Но надеюсь суть я донёс... https://codepen.io/hesrun/pen/gKQXNM