adding label to input so it can be styled easily

I made some changes to the plugin so the choose file button can be styled only with CSS.

css:
.bbp-attachments-form input[type=file] {
display: none !important;
}
.custom-file-upload {
padding: 6px 12px;
cursor: pointer;
width: 25%;
border: 1px solid #0098db;
border-radius: 2px;
}

uploader.php :
<p class=”bbp-attachments-form”>
<label for=”file-upload” id=”file-name” class=”custom-file-upload”>
<?php _e(“Choose File”, “gd-bbpress-attachments”); ?>:
</label><br/>
<input type=”file” size=”40″ id=”file-upload” name=”d4p_attachment[]”><br/>
<?php _e(“Add another file”, “gd-bbpress-attachments”); ?>
</p>

Problem is that I need to show the selected file name in the input box, I added this JS code to uploader.php but it only works for one attachment.

<!– <script>
document.querySelector(“#file-upload”).onchange = function(){
document.querySelector(“#file-name”).textContent = this.files[0].name;
}
</script> –>

I need to show the selected file name for all 4 attachments correctly, thanks in advance.

The page I need help with: [log in to see the link]