how to make a multiple user editor profile

Question

I have been having trouble with creating an HTML site with a user-changeable profile picture. For example, being able to upload and change your profile picture on employee profiles. I've tried many methods, so I really can't put any code down for revision, but here's what I thought should work:

var loadFile = function(event) {
  var image = document.getElementById("output");
  image.src = URL.createObjectURL(event.target.files[0]);
}

.profile-pic {
  color: transparent;
  transition: all 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.profile-pic input {
  display: none;
}

.profile-pic img {
  position: relative;
  object-fit: cover;
  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.12) !important;
  z-index: 0;
}

.profile-pic .-label {
  cursor: pointer;
  position: absolute;
  bottom: 0;
}

.profile-pic:hover span {
  background-color: rgba(0, 0, 0, 0.8);
  color: #fafafa;
  transition: background-color 0.2s ease-in-out;
  display: inline-block;
  padding: 0.2em;
  height: 2em;
  text-align: center;
}

<div class="profile-pic">
  <img src="img/ananthu-1.jpg" id="output" style="width:120px; height:120px;">
  <label for="file" class="-label">
                <span>Change Photo</span>
            </label>
  <input type="file" accept="image/*" id="file" onchange="loadFile(event)">
</div>
<hr>
<div class="profile-pic">
  <img src="img/ananthu-1.jpg" id="output" style="width:120px; height:120px;">
  <label for="file" class="-label">
                   <span>Change Photo</span>
                </label>
  <input type="file" accept="image/*" id="file" onchange="loadFile(event)">
</div>

Answer 1

now you change img tag 'id'. And add a parameter.

**HTML**
<div class="profile-pic">
    <img src="img/ananthu-1.jpg" id="output1"  style="width:120px; height:120px;"> 
        <label for="file" class="-label">
            <span>Change Photo</span>
        </label>
        <input type="file" accept="image/*" id="file" onchange="loadFile(event,1)">
                                
 </div>
  <hr>
      <div class="profile-pic">
        <img src="img/ananthu-1.jpg" id="output2"  style="width:120px; height:120px;"> 
            <label for="file" class="-label">
               <span>Change Photo</span>
            </label>
            <input type="file" accept="image/*" id="file" onchange="loadFile(event,2)">
                                
      </div>

and change the input file - display: block.

**CSS**
.profile-pic input {
  display: block;
}

**JS**
var loadFile = function(event,id) {
  var image = document.getElementById("output"+id);
  image.src = URL.createObjectURL(event.target.files[0]);
}