JSFiddle - React, Tailwind, and code Playground

by Ilia Lesnykh

HTML

<div class="photo-uploader">
  <ul>
    <li class="photo-inputs__item" data-id="1"></li>
    <li class="photo-inputs__item" data-id="2"></li>
    <li class="photo-inputs__item" data-id="3"></li>
    <li class="photo-inputs__item" data-id="4"></li>
  </ul>
  <input class="photo-uploader__control" id="image-upload" type="file" multiple />
</div>

<div id="log"></div>

CSS

.photo-inputs__item {
    float: left;
    width:90px; height:90px;
    border: 1px solid red;
    list-style:none;
  }
  .photo-uploader__control {
    display:none;
  }

JavaScript

'use strict';
$(".photo-inputs__item").click(function(e) {
    e.preventDefault();
    $("#image-upload").trigger('click', [e.target]);
});
$('#image-upload').on('click', function(event, target) {
    $('#log').append( '<p>Clicked on rect #'+$(target).data('id')+'</p>' );
});