After the first image is added, the next input fields are not populated with future files, the current image is replaced by the next uploaded file even though a new img element has been dynamically added. How can I place each uploaded image within the new dynamically created img element? I have viewed multiple answers surrounding this question, but none of the solutions were appropriate for what I needed. I am using alpine for most of the functionality, but I would be open to any Vanilla JavaScript solutions. No jQuery please and Thank You.

<div class="mt-4" x-data="{show: false }">
       click yes button
        <x-radio
           
            @click="show = true"
            name="as_ws_content"
            type="radio"
            value="yes"
        />yes

        <x-radio 
            
            @click="show = false"
            name="as_ws_content"
            
            type="radio"
            value="no"
            
        />no
        
        <div x-data="addRemovePicture()" x-show="show" >

            
            <x-button @click="addNewFieldPicture()"> 
                add picture
            </x-button>
           

            <template x-for="(picture, index) in picturesInput">
                <div>
                    <input type="file">
                    <img  id=""  alt="">


                </div>
            </template>
            
        </div>
    

    </div>

    <script>
        function addRemovePicture() {
            return {
                picturesInput: [],
                addNewFieldPicture() {
                    var length = this.picturesInput.push({id: this.picturesInput.length});
            
                },

            }
        }
    </script>