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'  class='hidden'>

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

CSS

.hidden {
    display: none;
}

p {
  color: #000;
}

JavaScript

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

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