Croppie.js image preview/upload is returning a blank image

Question

I'm currently working on a tool that can be used to upload two cropped images (in this case: signatures). For this, I am using the Croppie.js library. My problem is that only the second preview-crop-upload works, while the first returns a blank image immediately when previewing the image. Can someone see what I'm doing wrong?

HTML:

<h4 class="fw-100">2. Upload a clear a signature:</h4><br>
<label for="signature" class="hideonupload">Upload and crop your signature:</label><br class="hideonupload">
<label for="signature" class="btn btn-outline-light cursor-pointer hideonupload" style="margin-bottom: 0">Select signature</label><br class="hideonupload">
<label for="uploaded_image" class="showonupload hidden">Your signature:</label> 
<div id="uploaded_image"></div><br>
<hr class="spacer hideonupload">            
<div class="showonupload hidden">
    <form action="contracttogether.php" method="post">
        <label for="removeupload" class="btn btn-outline-light cursor-pointer" style="margin-bottom: 0">Remove upload</label><br>
        <input type="submit" name="removeupload" id="removeupload" class="hidden"><br><br>
    </form>
</div>

<h4 class="fw-100">3. Upload another signature:</h4><br>
<label for="signature2" class="hideonupload2">Upload:</label><br class="hideonupload2">
<label for="signature2" class="btn btn-outline-light cursor-pointer hideonupload2" style="margin-bottom: 0">Select signature</label><br class="hideonupload2">
<label for="uploaded_image2" class="showonupload2 hidden">Your signature:</label>
<div id="uploaded_image2"></div><br>
<hr class="spacer hideonupload2">
<div class="showonupload2 hidden">
    <form action="contracttogether.php" method="post">
        <label for="removeupload2" class="btn btn-outline-light cursor-pointer" style="margin-bottom: 0">Remove upload</label><br>
        <input type="submit" name="removeupload2" id="removeupload2" class="hidden"><br><br>
    </form>
</div>

<input type="file" name="signature" id="signature" required accept="image/*">
<input type="file" name="signature2" id="signature2" required accept="image/*">

Note: There are also two seperate modals for these uploads, but the fault isn't in there for sure.

JavaScript/jQuery:

$("#close_modal").click(function() {
    $("#uploadimageModal").hide();
});

    $(document).ready(function(){

    $image_crop = $('#image_demo').croppie( {
        enableExif: true,
        viewport: {
            width:359,
            height:385,
            type:'square'
        },
        boundary: {
            width:450,
            height:450
        }
    });

    $('#signature').on('change', function() {
        var reader = new FileReader();
        reader.onload = function(event) {
            $image_crop.croppie('bind', {
                url:event.target.result
            }).then(function() {
                console.log('');
            });
        }
        reader.readAsDataURL(this.files[0]);
        $('#uploadimageModal').modal('show');
    });

    $('.crop_image').click(function(event) {
        $image_crop.croppie('result', {
            type: 'canvas',
            size: 'viewport'
        }).then(function(response) {
            $.ajax({
                url:"assets/php/uploadsignature.php",
                type:"POST",
                data:{"imageupload": response},
                success:function(data) {
                    $('#uploadimageModal').modal('hide');
                    $('#uploaded_image').html(data);
                    $('.hideonupload').hide();
                    $('.showonupload').stop(true, true).fadeIn({ duration: 400, queue: false }).css('display', 'block').slideDown({ duration: 300, easing: method, complete: callback});
                }
            })
        })
    })

});


$("#close_modal2").click(function() {
    $("#uploadimageModal2").hide();
});

$(document).ready(function(){

    $image_crop = $('#image_demo2').croppie( {
        enableExif: true,
        viewport: {
            width:359,
            height:385,
            type:'square'
        },
        boundary: {
            width:450,
            height:450
        }
    });

    $('#signature2').on('change', function() {
        var reader = new FileReader();
        reader.onload = function(event) {
            $image_crop.croppie('bind', {
                url:event.target.result
            }).then(function() {
                console.log('');
            });
        }
        reader.readAsDataURL(this.files[0]);
        $('#uploadimageModal2').modal('show');
    });

    $('.crop_image2').click(function(event) {
        $image_crop.croppie('result', {
            type: 'canvas',
            size: 'viewport'
        }).then(function(response) {
            $.ajax({
                url:"assets/php/uploadsignature2.php",
                type:"POST",
                data:{"imageupload2": response},
                success:function(data) {
                    $('#uploadimageModal2').modal('hide');
                    $('#uploaded_image2').html(data);
                    $('.hideonupload2').hide();
                    $('.showonupload2').stop(true, true).fadeIn({ duration: 400, queue: false }).css('display', 'block').slideDown({ duration: 300, easing: method, complete: callback});
                }
            })
        })
    })

});

Sorry if this is a dumb question, I'm fairly new to JS and this problem has been bothering me for some hours now... Thank you for reading :)

EDIT: Commenting out the second part of the JS code (starting at #close_modal2) will make the first part work, but the second part obviously doesn't work now. I've also renamed the reader variable in the second part to 'reader2', but this hasn't helped either.