Like putting more than one drag and drop on the same page?

Question

I have to put several drag and drop on the same page. I took an example and played in my application. Well it works. However when I try to insert one more of the same element, this second drag and drop element does not work. I have never worked with Html or Css or Javascript. If anyone can tell me where to make the right changes, thank you. Follow the example I found and it works perfectly.

<title>Drag and drop, automatic upload</title>


<style>
#holder { border: 10px dashed #ccc; width: 300px; min-height: 300px; margin:   20px auto;}
#holder.hover { border: 10px dashed #0c0; }
#holder img { display: block; margin: 10px auto; }
#holder p { margin: 10px; font-size: 14px; }
progress { width: 100%; }
progress:after { content: '%'; }
.fail { background: #c00; padding: 2px; color: #fff; }
.hidden { display: none !important;}
</style>


<article>
<div id="holder">
</div> 
<p id="upload" class="hidden"><label>Drag &amp; drop not supported, but you can still upload via this input field:<br><input type="file"></label></p>
<p id="filereader">File API &amp; FileReader API not supported</p>
<p id="formdata">XHR2's FormData is not supported</p>
<p id="progress">XHR2's upload progress isn't supported</p>
<p>Upload progress: <progress id="uploadprogress" max="100" value="0">0</progress></p>
<p>Drag an image from your desktop on to the drop zone above to see the browser both render the preview, but also upload automatically to this server.</p> 
</article>


 <script>
        var holder = document.getElementById('holder'),
        tests = {
        filereader: typeof FileReader != 'undefined',
        dnd: 'draggable' in document.createElement('span'),
        formdata: !!window.FormData,
        progress: "upload" in new XMLHttpRequest
           }, 
         support = {
         filereader: document.getElementById('filereader'),
         formdata: document.getElementById('formdata'),
         progress: document.getElementById('progress')
       },
        acceptedTypes = {
        'image/png': true,
        'image/jpeg': true,
        'image/gif': true
        },
        progress = document.getElementById('uploadprogress'),
        fileupload = document.getElementById('upload');

 "filereader formdata progress".split(' ').forEach(function (api) {
   if (tests[api] === false) {
      support[api].className = 'fail';
   } else {

 support[api].className = 'hidden';
}
});

 function previewfile(file) {
    if (tests.filereader === true && acceptedTypes[file.type] === true) {
       var reader = new FileReader();
       reader.onload = function (event) {
       var image = new Image();
       image.src = event.target.result;
       image.width = 250; // a fake resize
      holder.appendChild(image);
    };

   reader.readAsDataURL(file);
   }  else {
       holder.innerHTML += '<p>Uploaded ' + file.name + ' ' + (file.size ?            (file.size/1024|0) + 'K' : '');
   console.log(file);
 }
  }

function readfiles(files) {
      debugger;
      var formData = tests.formdata ? new FormData() : null;
    for (var i = 0; i < files.length; i++) {
      if (tests.formdata) formData.append('file', files[i]);
      previewfile(files[i]);
   }

// now post a new XHR request
if (tests.formdata) {
  var xhr = new XMLHttpRequest();
  xhr.open('POST', '/devnull.php');
  xhr.onload = function() {
    progress.value = progress.innerHTML = 100;
  };

  if (tests.progress) {
    xhr.upload.onprogress = function (event) {
      if (event.lengthComputable) {
        var complete = (event.loaded / event.total * 100 | 0);
        progress.value = progress.innerHTML = complete;
      }
    }
  }

  xhr.send(formData);
  }
  }

  if (tests.dnd) { 
    holder.ondragover = function () { this.className = 'hover'; return false; };
    holder.ondragend = function () { this.className = ''; return false; };
    holder.ondrop = function (e) {
    this.className = '';
    e.preventDefault();
    readfiles(e.dataTransfer.files);
  }
   } else {
     fileupload.className = 'hidden';
     fileupload.querySelector('input').onchange = function () {
     readfiles(this.files);
   };
 }

Answer 1

This example is very simple and is working perfectly. I am posting if anyone has the same doubt.

                            <div style="padding-left:5px; padding-right:5px; padding-top:8px; max-width: 345px; width:auto; max-height:220px; height:auto; border:dashed 0.1em; cursor:pointer" onclick="clickDiv('logoLoginInput')">
                                <p id="logoLoginLable" style="widows: auto; margin-top: 60px;">
                                    (325x200)
                                </p>

                                <img id="imgLogoLogin" style="max-width: 325px; max-height: 200px; width: auto; height: auto;"/>

                                <input type="file" hidden="hidden" onchange="loadFile(event, 'imgLogoLogin', 'logoLoginLable')" name="logoLoginInput" id="logoLoginInput"  accept=".png, .jpg, .jpeg"/>
                            </div>

And here the necessary script:

     <script>
        var loadFile = function(event, idInput, idLable) {
            var output = document.getElementById(idInput);
            output.src = URL.createObjectURL(event.target.files[0]);
            document.getElementById(idLable).hidden = 'hidden';
        };

        var clickDiv = function(id) {
            var chooser = document.getElementById(id);
            chooser.click();
        };

        var clickLink = function(id){
            var link = document.getElementById("top-link");

        }           

    </script>