I've tried different ways but i get the first value always

HTML

```
 <i for="imgupload" class="material-icons imageUploadIcon">camera_alt</i>
    <input id="imgupload" type="file" data-img-id="0" accept="image/*" style="display: none;">

<i for="imgupload" class="material-icons imageUploadIcon">camera_alt</i>
    <input id="imgupload" type="file" data-img-id="1" accept="image/*" style="display: none;">

<i for="imgupload" class="material-icons imageUploadIcon">camera_alt</i>
    <input id="imgupload" type="file" data-img-id="2" accept="image/*" style="display: none;">

<i for="imgupload" class="material-icons imageUploadIcon">camera_alt</i>
    <input id="imgupload" type="file" data-img-id="3" accept="image/*" style="display: none;">

<i for="imgupload" class="material-icons imageUploadIcon">camera_alt</i>
    <input id="imgupload" type="file" data-img-id="4" accept="image/*" style="display: none;">

```

jQuery

```
$(function(){
      $("#imgupload").on('click', function(ev){
        ev.preventDefault();
        var imgid = $(this).data('img-id');
        console.log(imgid);
        var image = $('#imgupload')[0].files[0];
        var uid = <?php echo $_GET['user']; ?>;
        var fd = new FormData();
        fd.append('image',image);
        fd.append('uid', uid);
        fd.append('imgid', imgid);
            $.ajax({
                type: "POST",
                url: "php/usrIMG.php",
                data: fd,
                processData: false,
                contentType: false,
                success: function (data) {

                }
            });
      });
    });

```

console log prints 0 on every click

[Console log Screenshot](https://i.stack.imgur.com/JnS4Q.png)