Как использовать несколько тумблеров, созданных динамически?
Я начинающий Frontend. Я реализую тумблеры в HTML, CSS и Vanilla Javascript.
Структура:
Я создаю HTML с "n" количеством строк в зависимости от данных в моей базе данных django. Каждая строка имеет некоторые данные, такие как имя, id, статус. В колонке статуса есть тумблеры для каждой строки. Я реализовал тумблер, который отлично работает для одного единственного тумблера.
Проблема:
Когда есть несколько рядов и, следовательно, несколько тумблеров, только первый тумблер переключается, а не остальные. Когда я нажимаю на другие тумблеры, то срабатывает и первый. Я хочу, чтобы все тумблеры работали отдельно и обнаружить это в моем ванильном javascript.
Что я знаю:
Я знаю, что нам нужен уникальный id для каждого тумблера, но я не знаю, как это сделать, когда я не знаю, сколько у меня будет строк и как определить их все в JS коде.
Код:
Вот ссылка на мой кодепен для этой проблемы: ToggleSwitch
Any help will be appreciated. Thank you in advance!.