how can I assign cropperjs output to the corresponding appended row's hidden value?

Question

I'm making a dynamic student registering input consisting of a name and photo for every student and I'm using cropperjs to crop the photo of each student as shown in the picture, the problem is that when I click to upload the picture in the 3rd row's image it prints the output in the first row's "baseimg" hidden value, how can I make it so that when I upload an image for the 3rd appended row it actually saves the crop image in the appended html hidden value not in the first one?

var index = 2;
          $("#newstudentbtn").click(function(e) {
            e.preventDefault();
            $(".addstudent").append(`   <div class="row mb-3">
                    <div class="col-8">
                      <input type="text" class="form-control" placeholder="Student name" id="sname">
                    </div>
                    <div class="col-2 text-center ">
                      <img style="width:30px; height:30px;" src="https://cdn-icons-png.flaticon.com/512/83/83574.png" class="item-img" alt="Image" onclick="document.querySelector('.item-file').click()">
                      <input type="file" class="item-file" data-id="hi" name="image" style="display: none;">

                      <input id="baseimg${index}" name="baseimg" type="hidden" value="">

                    </div>
                    <div class="col-2 text-right">

                      <button type="button" id="removestudentbtn" class="btn btn-danger">Remove</button>
                    </div>
                  </div>`);
            index++;

          });
          var $uploadCrop,

            tempFilename,
            rawImg,
            imageId;
          var opts = {
            enableExif: true,

            viewport: {
              width: 300,
              height: 190,

            },
            boundary: {
              width: 350,
              height: 250
            },

            enforceBoundary: true,
            enableZoom: true,

          };

          function readFile(input) {
            if (input.files && input.files[0]) {

              var reader = new FileReader();
              reader.onload = function(e) {
                $('.upload-demo').addClass('ready');
                $('#cropImagePop').modal('show');

                rawImg = e.target.result;
              }
              reader.readAsDataURL(input.files[0]);
            } else {
              swal("Sorry - you're browser doesn't support the FileReader API");
            }
          }

          $uploadCrop = $('#upload-demo').croppie(opts);
          $('#cropImagePop').on('shown.bs.modal', function() {

            // alert('Shown pop');
            $uploadCrop.croppie('bind', {
              url: rawImg
            }).then(function() {});
          });

          $('.item-file').on('change', function() {



            var file = this.files[0];
            var fileType = file["type"];
            var validImageTypes = ["image/jpg", "image/jpeg", "image/png"];
            if ($.inArray(fileType, validImageTypes) > 0) {

              imageId = $(this).data('id');
              tempFilename = $(this).val();
              $('#cancelCropBtn').data('id', imageId);
              readFile(this);
            } else {
              Swal.fire({
                title: 'Error!',
                text: 'Please upload an image file! (png, jpg or jpeg)',
                icon: 'error',
                confirmButtonText: 'OK'
              })
              $('.item-file').val('');
              $('#baseimg').val('');

              $('#upload-demo').croppie('destroy');
              $uploadCrop = $('#upload-demo').croppie(opts)

            }


          });

          $('#cancelCropBtn').on('click', function() {
            $('.item-file').val('');
            $('#baseimg').val('');

            $('#upload-demo').croppie('destroy');
            $uploadCrop = $('#upload-demo').croppie(opts)
          });

          $('#cropImageBtn').on('click', function(ev) {
            var rowIndex = $(this).closest('.row').index();
            $uploadCrop.croppie('result', {
              type: 'canvas',
              size: 'original',
              quality: 0.4,
              format: 'jpeg',

            }).then(function(resp) {
              $('#cropImagePop').modal('hide');
              $('#baseimg').val(resp);

            });
          });