Добавление данных об изображении в список UL jQuery

Question

У меня есть список и для каждой li записи мне нужно прикрепить изображение, для этого у меня есть функция

Проблема в том, что когда я нажимаю i для , добавьте img это открывающееся окно, и я загружаю изображение, затем я получаю изображение URL и имя, этот URL и имя, которое я должен иметь в списке.

В этот момент скрипт добавляет список «in-to», но с дублированием предыдущие значения.

JSfiddle

$(document).on("click", ".attach-img", function() {
  $('#imgupload').click();
  $("input[type='file']").on('change', (event) => {
    value = event.target.files[0].name;
    console.log(event.target.files[0].name)

    var imageLink = `<a href="${window.URL.createObjectURL(event.target.files[0])}" target="_blank">${value}</a>`
    $(this).parent().find(".file-name").append(imageLink)
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>Tets 1 <span class='attach-img'>add img</span>
    <p class='file-name'></p>
  </li>
  <input type='file' id='imgupload' class='hidden' style="display:none">

</ul>
<ul>
  <li>Tets 2 <span class='attach-img'>add img</span>
    <p class='file-name'></p>
  </li>
</ul>
<ul>
  <li>Tets 3 <span class='attach-img'>add img</span>
    <p class='file-name'></p>
  </li>
  <input type='file' id='imgupload' class='hidden' style="display:none">
</ul>
<ul>
  <li>Tets 4 <span class='attach-img'>add img</span>
    <p class='file-name'></p>
  </li>
  <input type='file' id='imgupload' class='hidden' style="display:none">
</ul>
<ul>
  <li>Tets 5 <span class='attach-img'>add img</span>
    <p class='file-name'></p>
  </li>
  <input type='file' id='imgupload' class='hidden' style="display:none">
</ul>
<ul>
  <li>Tets 6 <span class='attach-img'>add img</span>
<p class='file-name'></p></li>
  <input type='file' id='imgupload' class='hidden' style="display:none">
  
</ul>

Answer 1

Здесь много чего не так. Прежде всего, id должен быть уникальным для каждого элемента DOM .

Во-вторых, все элементы html, которые генерируются динамически, должны следовать одной и той же структуре html, если вы хотите иметь доступ к ним, используя одинаковые логики c.

Более того, вот обновленная скрипка

Скрипка