JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<form action="">
  <input type="file" value="Add new image" id="addPhoto">
</form>
<ul class="list">
  <li><img src="http://bit.ly/2aiNTgB" alt="" class="image"></li>
  <li><img src="http://bit.ly/2aCVuGS" alt="" class="image"></li>
</ul>

CSS

.image {
  height: 100px;
  width: 100px;
  cursor:pointer;
}
.selected {
  border: 1px solid blue;
}

JavaScript

function changePhoto(input) {
  if (input.files[0]) {
    var reader = new FileReader();
    reader.onload = function(e) {
      var source = e.target.result;
      $(".list").append("<li><img src=" + source + " class='image'></li>")
    }
    reader.readAsDataURL(input.files[0]);
  }
}

$("#addPhoto").change(function() {
  changePhoto(this);
});

$('.image').click(function(){
            $('.selected').removeClass('selected');
            $(this).addClass('selected');
        });