JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
<li>Tets 1 <span class='attach-img'>add img</span><p class='file-name'></p></li>
<input type='file' id='imgupload' class='hidden'>

</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'>
</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'>
</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'>
</ul>
<ul>
<li>Tets 6 <span class='attach-img'>add img</span></li>
<input type='file' id='imgupload' class='hidden'>
<p class='file-name'></p>
</ul>

CSS

.hidden {
    display: none;
}

p {
  color: #000;
}

JavaScript

$(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)
  });
});