How to add checkbox over preview image

I have developed preview multiple images before upload. But now if i click on one of the image it should show a green tick over the image.

But when i tried to do so the tick mark is showing over the div not over the image. Can someone please help me as I am new to Rails.

This is my html code.

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <input type="file" multiple id="gallery-photo-add"><br>
   <label> <div class="gallery">

      <input type="checkbox">
      <span class="caption">
      </span>
    
  </div>
</label>

This is the js

$(function() {
    // Multiple images preview in browser
    var imagesPreview = function(input, placeToInsertImagePreview) {

        if (input.files) {
            var filesAmount = input.files.length;

            for (i = 0; i < filesAmount; i++) {
                var reader = new FileReader();

                reader.onload = function(event) {
                    $($.parseHTML('<img>')).attr('src', event.target.result).appendTo(placeToInsertImagePreview);
                }

                reader.readAsDataURL(input.files[i]);
            }
        }

    };

    $('#gallery-photo-add').on('change', function() {
        imagesPreview(this, 'div.gallery');
    });
});

And this is the css

.caption {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  padding: 0 10px;

  pointer-events: none;
}


.gallery img {
  display: block;

}

.gallery input {
  display: none;
}
.gallery input:checked + .caption {
  background: rgba(0,0,0,0.5);
}
.gallery input:checked + .caption::after {
  content: '✔';    
  position: absolute;
  top: 50%; left: 50%;
  width: 70px; height: 70px;
  transform: translate(-50%,-50%);
  color: green;
  font-size: 36px;
  line-height: 27px;
  text-align: center;
 }

https://jsfiddle.net/uj8v2kd5/21/

I am attaching the fiddle. After selecting the image when i click on save button it should get saved on the db