title: uploading multiple images to page
body: <p>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.</p>
  <p>Here is the code below, any tips would be really helpful, thanks in advance</p>
  <pre><code>&lt;div class=&quot;row&quot;&gt;
              &lt;div class=&quot;column&quot;&gt;
                  &lt;div class=&quot;profile-pic-div&quot;&gt;
                      &lt;img src=&quot;image.jpg&quot; id=&quot;photo&quot;&gt;
                      &lt;input type=&quot;file&quot; id=&quot;file&quot;&gt;
                      &lt;label for=&quot;file&quot; id=&quot;uploadBtn&quot;&gt;Choose Photo&lt;/label&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class=&quot;column&quot;&gt;
                  &lt;div class=&quot;profile-pic-div&quot;&gt;
                      &lt;img src=&quot;image.jpg&quot; id=&quot;photo&quot;&gt;
                      &lt;input type=&quot;file&quot; id=&quot;file&quot;&gt;
                      &lt;label for=&quot;file&quot; id=&quot;uploadBtn&quot;&gt;Choose Photo&lt;/label&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class=&quot;column&quot;&gt;
                  &lt;div class=&quot;profile-pic-div&quot;&gt;
                      &lt;img src=&quot;image.jpg&quot; id=&quot;photo&quot;&gt;
                      &lt;input type=&quot;file&quot; id=&quot;file&quot;&gt;
                      &lt;label for=&quot;file&quot; id=&quot;uploadBtn&quot;&gt;Choose Photo&lt;/label&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class=&quot;column&quot;&gt;
                  &lt;div class=&quot;profile-pic-div&quot;&gt;
                      &lt;img src=&quot;image.jpg&quot; id=&quot;photo&quot;&gt;
                      &lt;input type=&quot;file&quot; id=&quot;file&quot;&gt;
                      &lt;label for=&quot;file&quot; id=&quot;uploadBtn&quot;&gt;Choose Photo&lt;/label&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class=&quot;column&quot;&gt;
                  &lt;div class=&quot;profile-pic-div&quot;&gt;
                      &lt;img src=&quot;image.jpg&quot; id=&quot;photo&quot;&gt;
                      &lt;input type=&quot;file&quot; id=&quot;file&quot;&gt;
                      &lt;label for=&quot;file&quot; id=&quot;uploadBtn&quot;&gt;Choose Photo&lt;/label&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;script src=&quot;app.js&quot;&gt;&lt;/script&gt;
  
  &lt;script&gt;
      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 = &quot;block&quot;;
  });
  
  imgDiv.addEventListener('mouseleave', function(){
      uploadBtn.style.display = &quot;none&quot;;
  });
  
  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);
      }
  });
  &lt;/script&gt;
  
  *{
      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;
  }
  </code></pre>
  <p>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.</p>
  <pre><code>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 = &quot;block&quot;;
  });
  
  imgDiv1.addEventListener('mouseleave', function(){
      uploadBtn1.style.display = &quot;none&quot;;
  });
  
  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);
      }
  });
  </code></pre>