uploading multiple images to page

Question

I am trying to add a 5 row column with image containing an image, and the capability to click on each and upload a picture. I have one working, however when I try to add the second one image it doesnt work like the first image, I have played around with the script because that is where the issue has to be coming from but I still cant get it to work.

Here is the code below, any tips would be really helpful, thanks in advance

<div class="row">
            <div class="column">
                <div class="profile-pic-div">
                    <img src="image.jpg" id="photo">
                    <input type="file" id="file">
                    <label for="file" id="uploadBtn">Choose Photo</label>
                </div>
            </div>
            <div class="column">
                <div class="profile-pic-div">
                    <img src="image.jpg" id="photo">
                    <input type="file" id="file">
                    <label for="file" id="uploadBtn">Choose Photo</label>
                </div>
            </div>
            <div class="column">
                <div class="profile-pic-div">
                    <img src="image.jpg" id="photo">
                    <input type="file" id="file">
                    <label for="file" id="uploadBtn">Choose Photo</label>
                </div>
            </div>
            <div class="column">
                <div class="profile-pic-div">
                    <img src="image.jpg" id="photo">
                    <input type="file" id="file">
                    <label for="file" id="uploadBtn">Choose Photo</label>
                </div>
            </div>
            <div class="column">
                <div class="profile-pic-div">
                    <img src="image.jpg" id="photo">
                    <input type="file" id="file">
                    <label for="file" id="uploadBtn">Choose Photo</label>
                </div>
            </div>
        </div>

        <script src="app.js"></script>

<script>
    const imgDiv = document.querySelector('.profile-pic-div');
const img = document.querySelector('#photo');
const file = document.querySelector('#file');
const uploadBtn = document.querySelector('#uploadBtn');

imgDiv.addEventListener('mouseenter', function(){
    uploadBtn.style.display = "block";
});

imgDiv.addEventListener('mouseleave', function(){
    uploadBtn.style.display = "none";
});

file.addEventListener('change', function(){
    const choosedFile = this.files[0];
    alert(choosedFile);

    if (choosedFile) {

        const reader = new FileReader(); 

        reader.addEventListener('load', function(){
            img.setAttribute('src', reader.result);
        });

        reader.readAsDataURL(choosedFile);
    }
});
</script>

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

h1{
    font-family: sans-serif;
    text-align: center;
    font-size: 30px;
    color: #222;
}

.profile-pic-div{
    margin-top: 25px;
    margin-right: 10px;
    margin-left: 20px;
    height: 160px;
    width: 160px;
    overflow: hidden;
    border: 1px solid grey;
}

#photo{
    height: 100%;
    width: 100%;
}

#file{
    display: none;
}

#uploadBtn{
    height: 80px;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    background: rgba(0, 0, 0, 0.7);
    color: wheat;
    line-height: 30px;
    font-family: sans-serif;
    font-size: 15px;
    cursor: pointer;
    display: none;
}

Update: I tried creating a new app.js file and changing the id so they are unique. I also added these accordingly to the second row in the html file as well as my style.css. However, now when I click the second image in the row to upload a picture it adds it to the first columns picture.

const imgDiv1 = document.querySelector('.profile-pic-div1');
const img1 = document.querySelector('#photo1');
const file1 = document.querySelector('#file1');
const uploadBtn1 = document.querySelector('#uploadBtn1');

imgDiv1.addEventListener('mouseenter', function(){
    uploadBtn1.style.display = "block";
});

imgDiv1.addEventListener('mouseleave', function(){
    uploadBtn1.style.display = "none";
});

file1.addEventListener('change', function(){

    const choosedFile = this.files[3];

    if (choosedFile) {

        const reader = new FileReader(); //FileReader is a predefined function of JS

        reader.addEventListener('load', function(){
            img1.setAttribute('src', reader.result);
        });

        reader.readAsDataURL(choosedFile);
    }
});

Answer 1

You can't select an item if two items has the same ID. The ID is unique, you can use let labels = document.getElementsByTagName("label") . Now to get the label element you can use the index. ( labels[0] etc). With this workaround you can get all the tag you need.

Have a nice day!