Невозможно скрыть пользовательский интерфейс во второй раз при добавлении. Первый раз работает отлично. ⇐ CSS

[Гость]

У меня есть вариант использования, когда пользователи могут добавлять элементы в список и удалять их, но список не может превышать 10 элементов. Я создал кнопку Добавить элемент для добавления элементов пользовательского интерфейса и кнопку Удалить элемент для их удаления с помощью свойства 'display: 'none'. . Проблема возникает, когда я добавляю элемент с идентификатором, который ранее был удален. В таких случаях я не могу его скрыть или удалить.

div.container { ширина: 100%; граница: 1 пиксель, сплошная серая; цвет фона: серебро; } .кнопка { цвет фона: серебро; отступы: 6 пикселей 8 пикселей 6 пикселей 16 пикселей; маржа сверху: 10 пикселей; цвет: '#000'; размер шрифта: 1.2vw; поле слева: 20 пикселей; граница: нет; контур: нет; семейство шрифтов: без засечек; } .основной { левая граница: 13%; /* То же, что и ширина боковой панели */ размер шрифта: 1,5vw; отступ: 0 пикселей 10 пикселей; маржа-Верх: 13%; отступ снизу: 50 пикселей; высота: 100%; /* граница: 1 пиксель, сплошная синяя */ } .submitButton { высота: 50 пикселей; ширина: 40%; поле сверху: 20 пикселей; размер шрифта: 20 пикселей; радиус границы: 10 пикселей; Семейство шрифтов: без засечек } .addItemButton { высота: 40 пикселей; ширина: 20%; поле сверху: 20 пикселей; размер шрифта: 20 пикселей; радиус границы: 10 пикселей; выровнять-элементы: гибкий конец; justify-self: гибкий конец; Семейство шрифтов: без засечек } .removeItemButtonView { высота: 40 пикселей; ширина: 20%; размер шрифта: 20 пикселей; радиус границы: 10 пикселей; выровнять-элементы: гибкий конец; justify-self: гибкий конец; Семейство шрифтов: без засечек } .submitButton:hover { цвет фона: #007893; цвет: #fff } вход { высота: 34 пикселей; ширина: 60%; выравнивание текста: по центру; размер шрифта: 20 пикселей; граница: 1 пиксель, сплошная #ddd; радиус границы: 4 пикселя; отображение: встроенный блок; вертикальное выравнивание: по середине; поле: 10 пикселей 0 пикселей; } .inputWidth { ширина: 40%; } .detailBox, .sceneBox { дисплей: гибкий; гибкое направление: строка; выровнять-элементы: гибкий конец; оправдание-содержание: пространство между; нижняя граница: 1 пиксель, сплошной серый цвет; отступ: 20 пикселей; } Добавить блок пусть счетчик = 0 пусть устройствоАрр = [] const cmdevice = document.querySelector('.cmdevice'); функция addItem() { если (deviceArr.length >= 10) { возвращаться; } deviceArr.sort((a, b) => a - b); пусть новыйId = 1; for (let i = 0; i