title: Multiple Input [type=file] on same page
body: <p>I have one input here that can upload a file into a div as it's background image. But how would I add a second input [type=file] that could upload a second image into a second div?</p>
  
  <p>The second file that I want to upload is called:</p>
  
  <pre><code>&lt;input type='file' id='getval' name="logo" /&gt;
  </code></pre>
  
  <p>And I want to place that file as the background-image of the div called:</p>
  
  <pre><code>&lt;div id="logo"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>here's the whole thing:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>document.getElementById('getval').addEventListener('change', readURL, true);
  function readURL(){
     var file = document.getElementById("getval").files[0];
     var reader = new FileReader();
     reader.onloadend = function(){
        document.getElementById('adXL').style.backgroundImage = "url(" + reader.result + ")";        
     }
     if(file){
        reader.readAsDataURL(file);
      }else{
      }
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>h2 {
  font-size: 14px;
  margin: 14px 0 3px;
  }
  
  #adXL{
     background-image:url('');
     background-size:cover;
     background-position: center;
  min-height: 200px;
     width: 100%;
    min-width: 0;
     border: 0px solid #ddd;
    display: flex;
    flex-direction: column;
    margin: 20px 0 0 0;
    background-color: #eee;
  }
  
  
  #logo{
     background-image:url('');
     background-size:cover;
     background-position: center;
    min-width: 0;
    width: 150px;
    min-height: 50px;
    display: flex;
    flex-direction: column;
    margin: 20px;
    background-color: #ccc;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h2&gt;Background Image&lt;/h2&gt;
  &lt;input type='file' id='getval' name="background-image" /&gt;
  &lt;h2&gt;logo&lt;/h2&gt;
  &lt;input type='file' id='getval' name="background-image" /&gt;
  
  &lt;div id='adXL'&gt;
  &lt;div id='logo'&gt;
  &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>