Upload with multiple files only fills the first field

Question

I have the following custom upload form:

When I try to include files in image 2 and 3, the file name only appears in image field 1. See below. I selected image field 2 and the file replaced image field file 1:

The code I’m using is:

<script src="js/jquery.min.js"></script>
      <script type="text/javascript">
             $(document).ready(function(){
               $('#browsebutton :file').change(function(e){
                  var fileName = e.target.files[0].name;
                  $("#label").attr('placeholder',fileName)
              });
            });
         </script>


     <?php
         for($imagem = 1; $imagem <= 10; $imagem++)
         {
      ?>
      <div class="form-group">
        <label for=""><i class="fas fa-caret-right"></i> Imagem <?php echo $imagem ?>:</label>
        <div class="input-group">
                <label id="browsebutton" class="btn btn-primary input-group-addon" for="my-file-selector" >
                    <input id="my-file-selector" name="Arquivo[]" type="file" style="display:none;">
                      <i class="fas fa-upload"></i> Arquivo
                </label>
                <input id="label" type="text" class="form-control" readonly="">
            </div>
      </div>
      <div class="form-group">
       <input type="text" class="form-control" name="Legenda[]" placeholder="Legenda da foto <?php echo $imagem ?>" value="">
      </div>
      <?php } ?>

Answer 1

When repeating id’s the code will always get the first one you find. For this and for others it is incorrect to repeat id’s in HTML.

What you can do is add the loop variable $imagem in each id, thus creating distinct id’s, just as it did in the placeholder="Legenda da foto <?php echo $imagem ?>":

id="browsebutton<?php echo $imagem ?>"
id="my-file-selector<?php echo $imagem ?>"
id="label<?php echo $imagem ?>"

And in the for of label also:

for="my-file-selector<?php echo $imagem ?>"

And jQuery will stay:

$(document).ready(function(){
   $('[id^=browsebutton] :file').change(function(e){
      var fileName = e.target.files[0].name;
      $(this)
      .closest(".input-group")
      .find("[id^=label]")
      .attr('placeholder',fileName);
   });
});

The selector [id^=browsebutton] will take the elements that have id that begin with browsebutton, and the:

$(this)
.closest(".input-group")
.find("[id^=label]")
.attr('placeholder',fileName);

will change the placeholder of the element with the id starting with label within the div.input-group of the element.

See how it would look:

$(document).ready(function(){
   $('[id^=browsebutton] :file').change(function(e){
      var fileName = e.target.files[0].name;
      $(this)
      .closest(".input-group")
      .find("[id^=label]")
      .attr('placeholder',fileName);
   });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
  <label for=""><i class="fas fa-caret-right"></i> Imagem 1:</label>
  <div class="input-group">
          <label id="browsebutton1" class="btn btn-primary input-group-addon" for="my-file-selector1" >
              <input id="my-file-selector1" name="Arquivo[]" type="file" style="display:none;">
                <i class="fas fa-upload"></i> Arquivo
          </label>
          <input id="label1" type="text" class="form-control" readonly="">
      </div>
</div>
<div class="form-group">
 <input type="text" class="form-control" name="Legenda[]" placeholder="Legenda da foto 1" value="">
</div>
      <div class="form-group">
  <label for=""><i class="fas fa-caret-right"></i> Imagem 2:</label>
  <div class="input-group">
          <label id="browsebutton2" class="btn btn-primary input-group-addon" for="my-file-selector2" >
              <input id="my-file-selector2" name="Arquivo[]" type="file" style="display:none;">
                <i class="fas fa-upload"></i> Arquivo
          </label>
          <input id="label2" type="text" class="form-control" readonly="">
      </div>
</div>
<div class="form-group">
 <input type="text" class="form-control" name="Legenda[]" placeholder="Legenda da foto 2" value="">
</div>
      <div class="form-group">
  <label for=""><i class="fas fa-caret-right"></i> Imagem 3:</label>
  <div class="input-group">
          <label id="browsebutton3" class="btn btn-primary input-group-addon" for="my-file-selector3" >
              <input id="my-file-selector3" name="Arquivo[]" type="file" style="display:none;">
                <i class="fas fa-upload"></i> Arquivo
          </label>
          <input id="label3" type="text" class="form-control" readonly="">
      </div>
</div>