Listar imagem de 2 inputs

[Dexter Morgan 7]

Boa tarde, preciso listar o nomes das imagens de 2 inputs file:

<script type="text/javascript">
function handleFileSelect(evt){
var files = evt.target.files;
var output = [];
for(var i = 0, f; f = files[i]; i++){
output.push("<li>", escape(f.name), "</li>");
}
document.getElementById("list").innerHTML = "<li>" + output.join("") + "</li>";
}
document.getElementById("img").addEventListener("change", handleFileSelect, false);
</script>

<?php

echo "<td width=\"10%\">Foto</td>";
echo "<td width=\"50%\"><div class=\"upload\"><input type=\"file\" id=\"img\" name=\"foto\" /></div></td>";
echo "<td width=\"50%\"><output id=\"list\"></output></td>";



echo "<td width=\"10%\">Perfil</td>";
echo "<td width=\"50%\"><div class=\"upload\"><input type=\"file\" id=\"img\" name=\"perfil\" /></div></td>";
echo "<td width=\"50%\"><output id=\"list\"></output></td>";

?>

porém exibe apenas de um, do primeiro, ja tentei mudar mas nada funciona do que tentei ...

[Dexter Morgan 7]

Resolvido !