Showing a thumbnail preview of the image selected with file input and resetting the file input

[Yepkoo]

<!--Bootstrap 5 design-->
<div class="input-group">
    <input type="file" id="fileyourid" name="fileyourid[]" class="form-control" placeholder="Select" autocomplete="off"/>
    <span class="input-group-text" id="basic-addon2" style="cursor:pointer" onClick="document.getElementById('fileyourid').value= null;$('.appfileyourid').remove();">Reset</span>
</div>
<div id="lfileyourid"></div>

<script type="text/javascript">
    $(document).ready(function(){
        $('#fileyourid').change(function(){
            $("#lfileyourid").html('');
            for (var i = 0; i < $(this)[0].files.length; i++) {
                $("#lfileyourid").append('<img class="appfileyourid" src="'+window.URL.createObjectURL(this.files[i])+'" width="70px" height="70px"/>');
            }
        });
    });
</script>