I have multiple inputs on the same page with type "file" but only the first one is working. I have a "preview" img where the uploaded file will appear. I do not want to use unique IDs and I'm not sure how to use classes if that's the problem. I also tried dynamically creating the divs with JS but no improvement. Codepen below. My goal is to get all the inputs to work. https://codepen.io/pfbarnet/pen/VwMgmbP

 var fileTag = document.querySelector("#filetag"),
        preview = document.querySelector("#preview");
    
          if (fileTag) {
          
            fileTag.addEventListener("change", function () {
              changeImage(this);
            });
          }
        
          function changeImage(input) {
            var reader;
        
            if (input.files && input.files[0]) {
              reader = new FileReader();
        
              reader.onload = function (e) {
                preview.setAttribute("src", e.target.result);
              };
        
              reader.readAsDataURL(input.files[0]);
            }
          }

<input type='file' id= 'filetag' class='file-chooser'><img src='' id='preview'/></input>

<input type='file' id= 'filetag' class='file-chooser'><img src='' id='preview'/></input>

<input type='file' id= 'filetag' class='file-chooser'><img src='' id='preview'/></input>