JSFiddle - React, Tailwind, and code Playground

by dav sev

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="custom-file" id="iisalonefile">
      
      <ul id="the-list">
    
        <li>
          <a href="./uploads/9999999/2.pdf" target="_blank"> 2.pdf </a>
          <span class="item-file" id="2018-9999999-21314-0" href="21314/0">remove file</span>
        </li>
        <li>
          <a href="./uploads/9999999/isalonefile (2).pdf" target="_blank"> isalonefile (2).pdf </a>
          <span class="item-file" id="2018-9999999-21314-1" href="21314/1">remove file</span>
        </li>
      </ul>
      
      <input type="file" class="custom-file-input" style="display:none" id="isalonefile" name="isalonefile">
    
    </div>

CSS

span{
  cursor: pointer
}

JavaScript

$('.item-file').on('click', function(e){
        var me = this;
        var id = $(me).attr('id');
        var fieldName = $(me).closest('.custom-file-input').attr('id');
        console.log(fieldName);
   });