JSFiddle - React, Tailwind, and code Playground

HTML

<head>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
    
</head>

<button type="button" onclick="add_RequestedItems()">Add&nbsp;Item&nbsp;</button>


<!-- Modal -->
<div class="modal fade" id="ItemModal" name="ItemModal" tabindex="-1" aria-labelledby="ItemModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content" style="">
            <div class="modal-header">
               <hr>
               Coding by HTML: 
               <input id="outsideByjquery" type="file" oninput="testing()" accept="image/*,.pdf" multiple>
               <hr>
            </div>
            <div class="modal-body" id="ItemModalBody" style="">
              
            </div>
            <div class="modal-footer">
            </div>
        </div>
    </div>
</div>

JavaScript

function add_RequestedItems() {
  var divtest = document.getElementById('ItemModalBody')
  divtest.innerHTML = 'Coding by JS: <br><br>'+
  										'Success &nbsp:' +
  										'<input id="insideByjavascript" type="file" oninput="testing()" accept="image/*,.pdf" multiple>' +
  										'<br>(by oninput="testing()")<br><br>' +
                      'Failure&nbsp;&nbsp;&nbsp;:' +
  										'<input id="insideByjquery" type="file" accept="image/*,.pdf" multiple>' +
                      '<br>(by jquery")';

  $('#ItemModal').modal('show')
}


$("#insideByjquery").on("input", function () {
  alert("inside testing")
});

$("#outsideByjquery").on("input", function () {
  alert("outside testing")
});

function testing(){
  alert(window.URL.createObjectURL($("#insideByjavascript")[0].files[0]));
}