title: Selecting multiple images but storing the data in separate places using Javascript
body: <p>So I am using the following code for users to upload photos (as you can see I am not allowing the user to select multiple files all at once, they will have to select one file, open it, then select the next file, open it etc).</p>
  
  <p><strong>HTML</strong>:</p>
  
  <pre><code>&lt;input type="file" capture="camera" accept="image/*" id="files1" name="files[]"&gt;
  &lt;output id="list"&gt;&lt;/output&gt;
  
  &lt;form action="post.php"&gt;
  &lt;input type='hidden' id='imgsrc1' name='imgsrc1'&gt;
  &lt;input type='hidden' id='filepath1' name='filepath1'&gt;
  
  &lt;input type='hidden' id='imgsrc2' name='imgsrc2'&gt;
  &lt;input type='hidden' id='filepath2' name='filepath2'&gt;
  
  &lt;input type='hidden' id='imgsrc3' name='imgsrc3'&gt;
  &lt;input type='hidden' id='filepath3' name='filepath3'&gt;
  
  &lt;input type="submit" name="submit" value"Submit Listing"&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p><strong>JavaScript</strong></p>
  
  <pre><code>function handleFileSelect(evt) {
  var files = evt.target.files; // FileList object
  
  // Loop through the FileList and render image files as thumbnails.
  for (var i = 0, f; f = files[i]; i++) {
  
    // Only process image files.
    if (!f.type.match('image.*')) {
      continue;
    }
  
    var reader = new FileReader();
  
    // Closure to capture the file information.
    reader.onload = (function(theFile) {
      return function(e) {
        // Render thumbnail.
        var span = document.createElement('span');
        imgsrc = e.target.result;
        filename = theFile.name;
        filepath = "images/uploads/" + theFile.name;
        span.innerHTML = ['&lt;img class="thumb" src="', imgsrc,
                          '" title="', filepath, '"/&gt;'].join('');
        document.getElementById('list').insertBefore(span, null);
        document.getElementById('filepath1').value=filepath;
        document.getElementById('imgsrc1').value=imgsrc;
  
      };
    })(f);
  
    // Read in the image file as a data URL.
    reader.readAsDataURL(f);
  
   }
  }
  
  document.getElementById('files1').addEventListener('change', handleFileSelect, false);
  </code></pre>
  
  <p>The user selects the first image, the JavaScript then displays the photo by adding it inside <code>&lt;output id="list"&gt;&lt;/output&gt;</code> </p>
  
  <p>The lines below (taken from the code above) store the selected image's path into input box 'filepath1' and the base64 image data into input box 'imgsrc1': </p>
  
  <p>JavaScript:</p>
  
  <pre><code>  document.getElementById('filepath1').value=filepath;
    document.getElementById('imgsrc1').value=imgsrc;
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code> &lt;input type='hidden' id='imgsrc1' name='imgsrc1'&gt;
   &lt;input type='hidden' id='filepath1' name='filepath1'&gt;
  </code></pre>
  
  <p>The problem is, I want the user to be able to select 3 images, one by one. When the user selects the first image it is fine, but when they select the second image it is going to run that JavaScript function again and overwrite/add to anything stored in the hidden input boxes.</p>
  
  <p>When the user selects a second image, I want the data to be stored in two different hidden input boxes, for example:</p>
  
  <pre><code>&lt;input type='hidden' id='imgsrc2' name='imgsrc2'&gt;
  &lt;input type='hidden' id='filepath2' name='filepath2'&gt;
  </code></pre>
  
  <p>I have no idea how to do this. There is probably a really easy way to do this by using a counter or something but it's currently 11:18PM and I have the client in at 8am tomorrow, this is the last bit I need to fix for them lol. Any help would be appreciated.</p>