title: Upload/Display multiple files in localstorage
body: <p>I am trying to make it so you can upload multiple photos to the localstorage with each product having their own upload input. (currently only works for product 1).</p>
  
  <p>I've tried copying the jQuery code and altering the variables but cannot get it to work.</p>
  
  <p>Can anyone lead me in the right direction?</p>
  
  <p>Thanks</p>
  
  <p>Image: (notice it displays an image on product 1 but not product 2).</p>
  
  <p><a href="https://i.stack.imgur.com/dJ8Lq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dJ8Lq.png" alt="enter image description here"></a></p>
  
  <p>HTML:</p>
  
  <pre><code>   &lt;div class="form-group"&gt;
      &lt;label for="name"&gt;Product 1&lt;/label&gt;
      &lt;div class="input-group"&gt;
          &lt;input type="text" id="title1" class="form-control editField" readonly&gt;
          &lt;input type="text" id="description1" class="form-control editField" readonly&gt;
          &lt;input type="file" id="upload1" class="btn btn-default btn-file form-control editField" disabled="disabled" readonly&gt;
          &lt;div class="image1"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="form-group"&gt;
      &lt;label for="name"&gt;Product 2&lt;/label&gt;
      &lt;div class="input-group"&gt;
          &lt;input type="text" id="title2" class="form-control editField" readonly&gt;
          &lt;input type="text" id="description2" class="form-control editField" readonly&gt;
          &lt;input type="file" id="upload2" class="btn btn-default btn-file form-control editField" disabled="disabled" readonly&gt;
          &lt;div class="image2"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="form-group"&gt;
      &lt;label for="name"&gt;Product 3&lt;/label&gt;
      &lt;div class="input-group"&gt;
          &lt;input type="text" id="title3" class="form-control editField" readonly&gt;
          &lt;input type="text" id="description3" class="form-control editField" readonly&gt;
          &lt;input type="file" id="upload3" class="btn btn-default btn-file form-control editField" disabled="disabled" readonly&gt;
          &lt;div class="image3"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>jQuery:</p>
  
  <pre><code>&lt;script&gt;
  $(document).ready(function(){
    //You might want to do if check to see if localstorage set for theImage here
    var img = new Image();                
    img.src = localStorage.theImage;
  
    $('.image1').html(img);
  
    $("body").on("change","#upload1",function(){
        //Equivalent of getElementById
        var fileInput = $(this)[0];//returns a HTML DOM object by putting the [0] since it's really an associative array.
        var file =fileInput.files[0]; //there is only '1' file since they are not multiple type.
  
        var reader = new FileReader();
        reader.onload = function(e) {
             // Create a new image.
             var img = new Image();
  
             img.src = reader.result;
             localStorage.theImage = reader.result; //stores the image to localStorage
             $(".image1").html(img);
         }
  
         reader.readAsDataURL(file);//attempts to read the file in question.
      });
  });
  &lt;/script&gt;
  </code></pre>