random image print javascript

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!