JSFiddle - React, Tailwind, and code Playground

HTML

<li id="entry<?php echo $recipe_id ?>">
  <div class="addimage_icon" id="upload<?php echo $recipe_id; ?>">
    <form id="upload_icon" action="upload_extra.php" method="POST" 
     enctype="multipart/form-data"> 
       <input  class="upload" id="file" type="file" style="display:none" />   
       <input type="hidden" name="recipe_id" value="<?php echo $recipe_id; ?>"/>
       <img class="upload_icon" src="/upload_icon.png">
    </form>
  </div>
</li>
<li id="entry<?php echo $recipe_id ?>">
  <div class="addimage_icon" id="upload<?php echo $recipe_id; ?>">
    <form id="upload_icon" action="upload_extra.php" method="POST" 
     enctype="multipart/form-data"> 
       <input  class="upload" id="file" type="file" style="display:none" />   
       <input type="hidden" name="recipe_id" value="<?php echo $recipe_id; ?>"/>
       <img class="upload_icon" src="/upload_icon.png">
    </form>
  </div>
</li>

CSS

.upload_icon {
    cursor:pointer;
}

JavaScript

NodeList.prototype.forEach = Array.prototype.forEach;
document.querySelectorAll('input[type="file"]').forEach(function (file) {
    var click = function() {
        file.click();
    };
    var change = function() {
        console.log('change:', file.value);
    };
    file.form.querySelector('img').addEventListener('click', click);
    file.addEventListener('change', change);
});