andom image print javascript [duplicate]

I have asked same question before. but answers couldn't fix my problem..

when people upload their picture into input box, i want to show them random picture as a result.

but when i upload picture, it wouldn't changed but only changed when i clicked reset button. (i have no clue know why it becomes that way)

help me please.

here is my HTML

<div class="container file-upload">
<div class="image-upload-wrap" id="quote">
<input
class="file-upload-input"
type="file"
onchange="readURL(this);"
accept="image/*"
/>
<div class="drag-text">
<img src="Img/up-load.svg" class="mt-5 pt-5" width="80" alt="upload-image" />
<h3 class="mb-5 pb-5 pt-3 upload-text">UPLOAD YOUR PICTURE HERE!</h3>
</div>
</div>

<div class="file-upload-content">
<img class="file-upload-image" src="#" alt="your image" />
<div class="image-title-wrap">
<button type="button" onclick="removeUpload()" class="try-again-btn">
<span class="reset">RESET!</span>
</button>
</div>
</div>
</div>

here is my js

<script>
function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                $('.image-upload-wrap').hide();
                $('.file-upload-image').attr('src', e.target.result);
                $('.file-upload-content').show();
                $('.image-title').html(input.files[0].name);
            };
            reader.readAsDataURL(input.files[0]);
            
            randomImg()
            
        
        } else {
            removeUpload();
        }
    }

    function removeUpload() {
        $('.file-upload-input').replaceWith($('.file-upload-input').clone());
        $('.file-upload-content').hide();
        $('.image-upload-wrap').show();
    }
    $('.image-upload-wrap').bind('dragover', function () {
        $('.image-upload-wrap').addClass('image-dropping');
    });
    $('.image-upload-wrap').bind('dragleave', function () {
        $('.image-upload-wrap').removeClass('image-dropping');
    });
</script>

<script>
    function randomImg() {
        var quotes = [
            {
                text: '1',
                img: 'Img/1.jpg',
            },

            {
                text: '2',
                img: 'Img/2.jpg',
            },

            {
                text: '3',
                img: 'Img/3.jpg',
            },

            {
                text: '4',
                img: 'Img/4.JPG',
            },
        ];
        var quote = quotes[Math.floor(Math.random() * quotes.length)];
        document.getElementById("quote").innerHTML =
            '<p>' + quote.text + '</p>' + '<img src="' + quote.img + '">';
    }
</script>

I'm sorry it's too long but i can't solve by myself. I really appreciate for your help!