title: Using Multiple file inputs to set background image of multiple divs
body: <p><strong>What I'm trying to do:</strong></p>
  
  <p>1 - How can I use a second file input to set the background image of a class of divs, in this case the <strong>class .logo</strong>? (currently, I have one file input, which is setting the background image for the <strong>class .background</strong>, but I need to add a second file input)</p>
  
  <p>2 - How can I include a link that will "delete" or "trash" the file selected via the file input in order to reset a class of divs as having no background image?</p>
  
  <p><strong>Here is how I've tried to work through this problem so far:</strong></p>
  
  <p>I tried to add a second button, and duplicate the JS and then change the class names, however this broke everything. So I've provided two buttons for the file inputs here. Also, I tried to search for how to delete a file input once uploaded, but I could not understand anything I found. I read through <a href="https://stackoverflow.com/questions/1043957/clearing-input-type-file-using-jquery">this question about clearing a form</a>, but I could not successfully apply what was described.  </p>
  
  <p><strong>Here's what I've tried so far:</strong></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>$('.verborgen_file').hide();
  $('.uploadButton').on('click', function() {
    $('.verborgen_file').click();
  });
  
  $('.verborgen_file').change(function() {
    var file = this.files[0];
    var reader = new FileReader();
    reader.onloadend = function() {
      $('.background').css('background-image', 'url("' + reader.result + '")');
    }
    if (file) {
      reader.readAsDataURL(file);
    } else {}
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.background {
    background-image: url("");
    background-position: center;
    width: 100%;
    border: 0px dashed #ddd;
    background-color: #fbfbfb;
    padding: 10px;
  }
  
  .background:hover {
    cursor: move;
  }
  
  div.bg-img {
    background-position: center;
    background-repeat: no-repeat;
  }
  
  .responsive {
    background-image: url("");
    background-size: 120%;
    background-position: center;
    min-height: 20vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
  }
  
  .medium {
    background-image: url("");
    background-size: cover;
    background-position: center;
    height: 150px;
    width: 100%;
    margin-top: 15px;
    margin-bottom: 15px;
    position: relative;
  }
  
  .logo {
    height: 50px;
    width: 80px;
    background-color: #eee;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="inputSection"&gt;
  &lt;h1&gt;Input Section&lt;/h1&gt;
  Background:
  &lt;input type='file' class='verborgen_file' /&gt;
  &lt;input type="button" value="Upload" class="uploadButton" /&gt;
  &lt;a href=""&gt;delete&lt;/a&gt;
  &lt;br&gt; Logo:
  &lt;input type="button" value="Upload" class="uploadButton" /&gt;&lt;a href=""&gt;delete&lt;/a&gt;
  &lt;/div&gt;
  
  &lt;br&gt;
  &lt;div class="imageSection"&gt;
  &lt;h1&gt;Divs with Images Section&lt;/h1&gt;
  &lt;div class="background responsive bg-img"&gt;
    &lt;div class="logo"&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;div class="background medium bg-img"&gt;
    &lt;div class="logo"&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>