title: Apply CSS to active dropped element in a drop area using JavaScript
body: <p>I have few draggable nodes which need to be highlighted after drop, only the element which is dropped needs to have a border.<br>
  Eg: I drop nodeA and it will be highlighted. Later when I drop nodeB, then nodeB should be highlighted and nodeA should not be highlighted.</p>
  
  <p>This is the function I have written:</p>
  
  <pre><code>function drop(ev) {
      ev.preventDefault();
      var data = ev.dataTransfer.getData("text");
      var nodeCopy = document.getElementById(data).cloneNode(true);
      test++;
      nodeCopy.id =test; /* We cannot use the same ID */
      var newNodeId= nodeCopy.id;
      ev.target.appendChild(nodeCopy);
      document.getElementById(newNodeId).className += " draggeddStyle";
  }
  </code></pre>
  
  <p>I am able to highlight the node using: </p>
  
  <pre><code>document.getElementById(newNodeId).className += " draggeddStyle;
  </code></pre>
  
  <p>After that, if I drag another node, both nodes end up having the same style.</p>