Unable to preview same image using Javascript Php

Question

I am working with php and javascript,Right now i am trying to display "image preview" before upload,I can cancel image and can select another image after display "preview",But whenever i cancel any image(via click on "close" button ) and then select same image then "preview" not displaying ,In other words if i select another image after cancecl then everything is working fine but if i cancel and select same image again then "image preview" not displaying Here is my html code

<span class="previewpostimage"><img id="thumb" src="" /></span>
<span class="close_btn_t">
<button type="button" id="closebtn" style="display:none;"><span aria-hidden="true">×</span>
</button>
</span>
                    
<ul class="media_r_i_att_pp">
   <li class="new_Btn"><a href="#"> <img src="assets/social/images/media_pt_att_xt.svg" alt="img"></a>
</li> 
    <input type="file" id="my_file" name="file" onchange="preview()" style="display: none;"/>
</a></li> 
</ul>

Here is my script code for "select image" and "preview image"

<script>
$('.new_Btn').click(function() {
    $('#my_file').click();
});

$('#closebtn').click(function() {
     $('#thumb').attr('src', '');
     $('#closebtn').hide('');
});

function preview() {
    $('#thumb').show('');
    $('#closebtn').show('');
   thumb.src=URL.createObjectURL(event.target.files[0]);
}
</script>