Как использовать несколько тумблеров, созданных динамически?

Я начинающий Frontend. Я реализую тумблеры в HTML, CSS и Vanilla Javascript.

Структура:

Я создаю HTML с "n" количеством строк в зависимости от данных в моей базе данных django. Каждая строка имеет некоторые данные, такие как имя, id, статус. В колонке статуса есть тумблеры для каждой строки. Я реализовал тумблер, который отлично работает для одного единственного тумблера.

Проблема:

Когда есть несколько рядов и, следовательно, несколько тумблеров, только первый тумблер переключается, а не остальные. Когда я нажимаю на другие тумблеры, то срабатывает и первый. Я хочу, чтобы все тумблеры работали отдельно и обнаружить это в моем ванильном javascript.

Что я знаю:

Я знаю, что нам нужен уникальный id для каждого тумблера, но я не знаю, как это сделать, когда я не знаю, сколько у меня будет строк и как определить их все в JS коде.

Код:

Вот ссылка на мой кодепен для этой проблемы: ToggleSwitch

Any help will be appreciated. Thank you in advance!.
Вернуться на верх