javascript - Two input fields with the same name - on change event -

i have 2 input fields same name - because business logic of project.

they that:

<input type="file" name="director_front_passport[]" class="app-file" id="director_front_passport" />  <input type="file" name="director_front_passport[]" class="app-file" />

i need append image name after input field on change event.but in way, how make difference between these 2 inputs?

i thought try differ them id attr, have clone button add more fields , don't think work on change event.

updated: code on change event following:

var inputs = document.queryselectorall( '.app-file' );  array.prototype.foreach.call( inputs, function( input )   {    input.addeventlistener( 'change', function( e )     {      //my code displaying image    }  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

i updated code using $(this) find changed input , code looks:

var inputs = document.queryselectorall( '.app-file' );            array.prototype.foreach.call( inputs, function( input )          {             input.addeventlistener( 'change', function( e )              {                var changed = $(this);                  var label	 = changed.next(),                      labelval = label.innerhtml,                      divname = label.next();                 filename = e.target.value.split('\\').pop();                divname.html(filename);                              });            });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  <input type="file" name="director_front_passport[]" class="app-file" id="director_front_passport" />  <input type="file" name="director_front_passport[]" class="app-file" />

you can use this keyword within event handler identify element raised event. try this:

$('.app-file').change(function() {    $(this).after('<div>' + this.files[0].name + '</div>');  })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <input type="file" name="director_front_passport[]" class="app-file" id="director_front_passport" />  <input type="file" name="director_front_passport[]" class="app-file" />

with second example it's little odd call foreach in manner are. can call foreach on nodelist returned queryselectorall, this:

document.queryselectorall('.app-file').foreach(function(input) {     input.addeventlistener('change', function(e) {         // code displaying image     }) }