编号图像选择器

Question

美好的一天！

首先，我不是我的问题的正确名称或标题，但这就是我所需要的。

如何制作具有编号功能的图像选择器，如下图所示？我正在使用html和jquery选择图像，但是在选择图像时我不知道如何放置和排序数字。我的代码就像...

HTML：

<div class="photoList">
  <label class="singlePhotoWrap relative">
    <img src="images/previewDefaultImg.png" class="photo" alt="Image">
    <img src="images/numberedIco.png" class="absolute numberedIcon" alt="Check Icon">
    <span class="photoCounter">1</span>
    <input type="checkbox" name="photoSelector" class="hidden" autocomplete="off">
  </label>
  ...

Javascript：

$(document).ready(function(e){
$(".singlePhotoWrap").click(function() {
    var current = document.getElementById("photoSelectedCounter").value;

    if ($(this).find('input[name=photoSelector]:checked')){
    var totalAdd = parseFloat(current) + .5;
    $('#photoSelectedCounter').val(totalAdd);
    $(this).find(".photoCounter").text(totalAdd);
    }
    if ($(this).find('input[name=photoSelector]:unchecked')) {
        var totalAdd = parseFloat(current) - .5;
        $('#photoSelectedCounter').val(totalAdd);
        $(this).find(".photoCounter").text(totalAdd);
    }
});

}）;

我的JavaScript代码始终返回已检查状态。它总是增加我的跨度。

这是屏幕截图：

编号图像选择器屏幕截图

如何使用javascript或jquery做到这一点？