JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<h2>Drag & Drop Demo</h2>
<p>Drag and drop the image into the drop box:</p>
<div id="dropBox" ondragover="dragOver(event);" ondrop="drop(event);" >
</div>

<!--for some reason when i drop element in dropbox, it doesn't go in new line, so i wrote this <br>. If you have better solution, please tell me.-->
<label id="dragA" draggable="true" ondragstart="dragStart(event);">Marko      
Maric<br></label>
<label id="dragB" draggable="true" ondragstart="dragStart(event);">Ana   
Ladic<br></label>
<label id="dragC" draggable="true" ondragstart="dragStart(event);">Ivan  Saric<br></label>

<input type='button' onclick='saveAndDisplay()' value='Submit'/> 

<!--by clicking on submit button, I want the names i picked to display in this paragraph-->

<p id="demo">"Names are":</p>

</body>
</html>

CSS

#dropBox{
     width:150px;
     height:200px;
     border: 1px solid gray;
     background: lightyellow;
     text-align: left;
     margin: 20px 0;
     color: orange;
}
#dropBox{
     margin: 10px;
}

JavaScript

window.dragStart = function(e) {
    e.dataTransfer.effectAllowed = "move";
    e.dataTransfer.setData("Text", e.target.getAttribute("id"));
}
window.dragOver = function(e) {
    e.preventDefault();
    e.stopPropagation();
}
window.drop = function(e) {
    e.stopPropagation();
    e.preventDefault();
    var data = e.dataTransfer.getData("Text");
    e.target.appendChild(document.getElementById(data));

    //when i dropped an element and if i made mistake, by clicking on element i remove it from dropbox
    var txt1 = document.getElementById(data);
    txt1.onclick = function () {
    document.getElementById(data).remove();
    this.remove();};        
}

window.saveAndDisplay = function() {
    var result = document.getElementById('demo');
    var list = document.getElementById('dropBox');
    while (list.children.length > 0) {
        result.appendChild(list.children[0]);
    }
}