javascript - show button reset when input file have value -

i try create button reset input file. everytime input file have value button show reset input file. problem is, have 6 input file. , when upload image on 1 of input file, button show up, other input file didnt have value yet. how make specific button?

my code this

$("#inputfile1").change(function(){   if($(this).val() == "")     $('.reset').css({"display": "none"});   else     $('.reset').css({"display": "block"}); }) $("#inputfile2").change(function(){   if($(this).val() == "")     $('.reset').css({"display": "none"});   else     $('.reset').css({"display": "block"}); }) $("#inputfile3").change(function(){   if($(this).val() == "")     $('.reset').css({"display": "none"});   else     $('.reset').css({"display": "block"}); }) 

heres jsfiddle https://jsfiddle.net/30uv0kfa/

i surrounded each group of input file , button div , simplified js code.

$(document).ready(function() {    $(".input-file").on("change", function(){      if($(this).val() == "") {        $(this).parent().find(".reset").css({"display": "none"});      } else {        $(this).parent().find(".reset").css({"display": "block"});      }    });  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div>    <input class="input-file" id="inputfile1" type="file"/>    <button class="reset" style="display:none">reset</button>  </div>  <div>    <input class="input-file" id="inputfile2" type="file"/>    <button class="reset" style="display:none">reset</button>  </div>  <div>    <input class="input-file" id="inputfile3" type="file"/>    <button class="reset" style="display:none">reset</button>  </div>  <div>    <input class="input-file" id="inputfile4" type="file"/>    <button class="reset" style="display:none">reset</button>  </div>  <div>    <input class="input-file" id="inputfile5" type="file"/>    <button class="reset" style="display:none">reset</button>  </div>