Как получить индекс коллекции HTML при нажатии?

Question

Попытка создать функцию для получения index при каждом нажатии edit icon.Несмотря на то, что есть решения, использующие closure, которые все еще не работают с моим делом и дают неправильные результаты, когда имеется более одного значка редактирования.

Когда у меня три значка, моя консоль выводит:

1. (3) 0
2. (2) 1
3. 2

Нужно знать, почему это консоль.

Вотjs скрипка с полным кодом: https://jsfiddle.net/c2L4buj6/5/

Пример кода JS :

function clickEnable(input, title, url, plus, editIcon, anchorEdit, edit)
{
  for(let i = 0; i < editIcon.length; i++){
      editIcon[i].addEventListener("click", function(i){
        console.log(i);
      }.bind(null, i));
  }
}

ОБНОВЛЕНИЕ Чтобы показать ошибку более четко, загрузил фотографию о том, что происходит.На фотографии есть три поля, и при нажатии на иконку редактирования она возвращает правильное значение, но также возвращает копии правильного значения.Я хочу знать, что вызывает это.

Вот изображение ошибки

Answer 1

Вы не удаляете старых слушателей событий, поэтому вы получаете дубликаты для всех ранее добавленных элементов.

Одно решение ( проверено на основе вашей скрипки):

function clickEnable(input, title, url, plus, editIcon, anchorEdit, edit)
{
  let i = editIcon.length - 1;
  editIcon[i].addEventListener("click", function(){
    console.log(i);
  });
}