I have the following code:

<div id="img"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
    var folder = "img/";

    $.ajax({
        url : folder,
        success: function (data) {
            $(data).find("a").attr("href", function (i, val) {
                if (val.match(/\.(jpe?g|png|gif)$/)) { 
                    $("#img").append( "<img src='" + val +"'>" );
                } 
            });
        }
    });
</script>

Now i want for every image that is found in folder img/ to create a <img src >

I tried but no luck:

<div id="img"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
    var folder = "img/";
    
    $.ajax({
        url : folder,
        success: function (data) {
            $(data).find("a").attr("href", function (i, val) {
                if (val.match(/\.(jpe?g|png|gif)$/)) { 
                    for (var i = 1; i <= 20; i++) {
                        $("#img").append( "<img src='" + val +"'>" );
                    }
                } 
            });
        }
    });
</script> 

How can loop through and display all images? Thank you!