JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML>
<html>
<head>
  <title></title>
</head>
<body>
<div class="photo-uploader">
  <ul>
    <li class="photo-inputs__item"></li>
    <li class="photo-inputs__item"></li>
    <li class="photo-inputs__item"></li>
    <li class="photo-inputs__item"></li>
  </ul>
  <input class="photo-uploader__control" id="image-upload" type="file" multiple />
</div>
</body>
</html>

CSS

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

JavaScript

(function () {
  var prop;
  $(".photo-inputs__item").click(function () {
    prop = this; 
    $("#image-upload").trigger('click');//[0].myProperty = this;
    return false;
  });
  $('#image-upload').change(function (event) {
    var selectedItem = prop;//this.myProperty;
    delete prop;//this.myProperty;
      // вместо этого в каждую рамку будет загружаться своя картинка.
      // в этой точке пользователь уже выбрал файл и его можно получить.
    $(selectedItem).css({
      border: 'blue solid 1px'
    });         
  });

}());