Issue with 2 file upload button

Question

I have two upload button (Upload Photo) & (Upload Signature). The issue is on same time only one button is uploading file second button is not uploading file, when I change the input ID on that time both buttons not working, I have placed both html code and script code and I want uploaded file name with path, Please fix the issue.

 // This script is for photo upload button const realFileBtn = document.getElementById("real-file-upload"); const customBtn = document.getElementById("custom-button"); const customTxt = document.getElementById("custom-text"); customBtn.addEventListener("click", function() { realFileBtn.click(); }); realFileBtn.addEventListener("change", function() { if (realFileBtn.value) { customTxt.innerHTML = realFileBtn.value.match( /[\\/\\\\]([\\w\\d\\s\\.\\-\\(\\)]+)$/ )[1]; } else { customTxt.innerHTML = "No file chosen, yet."; } }); // This script is for signature upload button const realFileBtn = document.getElementById("real-file-upload"); const customBtn = document.getElementById("custom-button"); const customTxt = document.getElementById("custom-text"); customBtn.addEventListener("click", function() { realFileBtn.click(); }); realFileBtn.addEventListener("change", function() { if (realFileBtn.value) { customTxt.innerHTML = realFileBtn.value.match( /[\\/\\\\]([\\w\\d\\s\\.\\-\\(\\)]+)$/ )[1]; } else { customTxt.innerHTML = "No file chosen, yet."; } });

 <div class="col-md-4"> <input type="file" id="real-file-upload" hidden="hidden" /> <button type="button" id="custom-button">Upload Photo</button> <span id="custom-text">No file chosen, yet.</span> </div> <div class="col-md-4"> <input type="file" id="real-file-signature" hidden="hidden" /> <button type="button" id="custom-button">Upload Signature</button> <span id="custom-text">No file chosen, yet.</span> </div>

Answer 1

You need to delegate

1. I changed id to class everywhere
2. I wrapped the two sets in one container

 const container = document.getElementById("container") container.addEventListener("click", function(e) { const tgt = e.target; if (tgt.classList.contains("custom-button")) tgt.closest("div").querySelector(".file-upload").click() }); container.addEventListener("change", function(e) { const tgt = e.target; const parent = tgt.closest("div") const realFileBtn = parent.querySelector(".file-upload") const customTxt = parent.querySelector(".custom-text") if (realFileBtn.value) { customTxt.innerHTML = realFileBtn.value.match( /[\\/\\\\]([\\w\\d\\s\\.\\-\\(\\)]+)$/ )[1]; } else { customTxt.innerHTML = "No file chosen, yet."; } });

 .custom-button { padding: 10px; color: white; background-color: #009297; border: 1px solid #009297; border-radius: 5px; cursor: pointer; } .custom-button:hover { background-color: #00b28f; } .custom-text { margin-left: 10px; font-family: sans-serif; color: #aaa; }

 <div id="container"> <div class="col-md-4"> <input type="file" class="file-upload" hidden="hidden" /> <button type="button" class="custom-button">Upload Photo</button> <span class="custom-text">No file chosen, yet.</span> </div> <div class="col-md-4"> <input type="file" class="file-upload" hidden="hidden" /> <button type="button" class="custom-button">Upload Signature</button> <span class="custom-text">No file chosen, yet.</span> </div> </div>