How to change file upload text to image and upload the file and render to a div

Question

I have 2 different upload button through which I need to upload the image and render to a div,I can able to render image on click of Upload button 1 but on click of Upload button 2 I am not able to render the image.

$(document).ready(function(e) {
        $(".showonhover").click(function(){
            $("#selectfile").trigger('click');
        });
    });


var input = document.querySelector('input[type=file]'); // see Example 4

input.onchange = function () {
  var file = input.files[0];

  drawOnCanvas(file);   // see Example 6
  displayAsImage(file); // see Example 7
};

function drawOnCanvas(file) {
  var reader = new FileReader();

  reader.onload = function (e) {
    var dataURL = e.target.result,
        c = document.querySelector('canvas'), // see Example 4
        ctx = c.getContext('2d'),
        img = new Image();

    img.onload = function() {
      c.width = img.width;
      c.height = img.height;
      ctx.drawImage(img, 0, 0);
    };

    img.src = dataURL;
  };

  reader.readAsDataURL(file);
}

function displayAsImage(file) {
  var imgURL = URL.createObjectURL(file),
      img = document.createElement('img');

  img.onload = function() {
    URL.revokeObjectURL(imgURL);
  };

  img.src = imgURL;     
  // document.body.removeChild(img);
  document.getElementById("demo").appendChild(img);

}
function displayAsImage2(file) {
  var imgURL = URL.createObjectURL(file),
      img = document.createElement('img');

  img.onload = function() {
    URL.revokeObjectURL(imgURL);
  };

  img.src = imgURL;     
  // document.body.removeChild(img);
  document.getElementById("demo1").appendChild(img);

}

$("#upfile1").click(function () {
    $("#file1").trigger('click');
});

input {
  font-size: 20px;
  height:50px;
}
.imagediv {
    float:left;
    margin-top:50px;
}
.imagediv .showonhover{
    background:red;
    padding:20px;
    opacity:0.9;
    color:white;
    width: 100%;
    display:block;  
    text-align:center;
    cursor:pointer;
}
#upfile1 {
background:red;
    padding:20px;
    opacity:0.9;
    color:white;
    width: 10%;
    display:block;  
    text-align:center;
    cursor:pointer; 
}
#demo img,#demo1 img{
  width:200px;
  height:auto;
  display:block;
  margin-bottom:10px;
  }

<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>To an image "click on the image below"</h3>
<p>
<input type="file" id="file1" name="image" accept="image/*" capture style="display:none"/>
<span  id="upfile1" style="cursor:pointer" />upload button1</span>
</p>
<p id="demo"></p>
<p id="demo1"></p>
<div align="left" class="imagediv">
     <span>Or click here</span> 
            <span class="visibleimg"></span>
            <span class="showonhover">upload button2</span>
            <input id="selectfile" type="file" name="" style="display: none;" />
        </div>
    <script  src="script.js"></script>

Answer 1

The main issue I see is that querySelector only returns "the first Element within the document that matches the specified selector."

Since there are more than one input, I suggest using querySelectorAll to return "a list of the document's elements that match the specified group of selectors."

Below, I'm using forEach to bind the onchange listener to each input.

// Code goes here

$(document).ready(function(e) {
  $(".showonhover").click(function() {
    $("#selectfile").trigger('click');
  });
  $("#upfile1").click(function() {
    $("#file1").trigger('click');
  });
});


var inputs = document.querySelectorAll('input[type=file]');

inputs.forEach(function(input) {

  input.onchange = function() {
    var file = this.files[0];
    displayAsImage(file);
  };

});


function displayAsImage(file) {

  var imgURL = URL.createObjectURL(file),
    img = document.createElement('img');

  img.onload = function() {
    URL.revokeObjectURL(imgURL);
  };

  img.src = imgURL;
  document.getElementById("demo").appendChild(img);

}

/* Styles go here */

input {
  font-size: 20px;
  height: 50px;
}

.imagediv {
  float: left;
  margin-top: 50px;
}

.imagediv .showonhover {
  background: red;
  padding: 20px;
  opacity: 0.9;
  color: white;
  width: 100%;
  display: block;
  text-align: center;
  cursor: pointer;
}

#upfile1 {
  background: red;
  padding: 20px;
  opacity: 0.9;
  color: white;
  width: 10%;
  display: block;
  text-align: center;
  cursor: pointer;
}

#demo img,
#demo1 img {
  width: 200px;
  height: auto;
  display: block;
  margin-bottom: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<h3>To an image "click on the image below"</h3>
<p>
  <input type="file" id="file1" name="image" accept="image/*" capture style="display:none" />
  <span id="upfile1" style="cursor:pointer">upload button1</span>
</p>
<p id="demo"></p>
<p id="demo1"></p>
<div align="left" class="imagediv">
  <span>Or click here</span>
  <span class="visibleimg"></span>
  <span class="showonhover">upload button2</span>
  <input id="selectfile" type="file" name="" style="display: none;" />
</div>
<script src="script.js"></script>