Random letters from a random word

I have 4 words, 4 letters in each word. I need to choose 1 word from those 4 words. With that 1 word, I need to randomize the letter order and put it into draggable box. I then need to drag that box in to proper order.

This is for generating random word from array:

 var myShows = ['coco','bobo','lolo','popo'];
 var show = myShows[Math.floor(Math.random() * myShows.length)];

I don't know how to randomize letters place from generated random word:

function handleDragStart(e) {
                e.dataTransfer.setData("text", this.id);
            }
            function handleDragEnterLeave(e) {
                if (e.type == "dragenter") {
                    this.className = "drag-enter";
                } else {
                    this.className = "";
                }
            }
            function handleOverDrop(e) {
                e.preventDefault();
                if (e.type != "drop") {
                    return;
                }
                var draggedId = e.dataTransfer.getData("text");
                var draggedEl = document.getElementById(draggedId);
                if (draggedEl.parentNode == this) {
                    return;
                }
                draggedEl.parentNode.removeChild(draggedEl);
                this.appendChild(draggedEl);
                this.className = "";
            }
            window.onload = function () {


                var myShows = ['coco','bobo','lolo','popo'];
                var show = myShows[Math.floor(Math.random() * myShows.length)];
                //document.write(show);
              /*i'd tried this below code to generate random letter but it just working in log,
              how would i use that to store*/
for (var i = 0; i < show.length; i++) {
  console.log(show.charAt(i));
    //document.write(show.charAt(i));
}
               // document.randform.rf.value=show;

                var draggable = document.querySelectorAll("[draggable]");
                var targets = document.querySelectorAll("[data-drop-target]");
                for (var i = 0; i < draggable.length; i++) {
                    draggable[i].addEventListener("dragstart", handleDragStart);
                }
                for (i = 0; i < targets.length; i++) {
                    targets[i].addEventListener("dragover", handleOverDrop);
                    targets[i].addEventListener("drop", handleOverDrop);
                    targets[i].addEventListener("dragenter", handleDragEnterLeave);
                    targets[i].addEventListener("dragleave", handleDragEnterLeave);
                }
            };

This is my HTML body:

  <div class="panel">
                    <div data-drop-target="true"></div>
                    <div data-drop-target="true"></div>
                    <div data-drop-target="true"></div>
                    <div data-drop-target="true"></div>
                </div>
                <div class="panel" >
                    <div data-drop-target="true" draggable="true" ></div>
                    <div data-drop-target="true" draggable="true"> </div>
                   <div data-drop-target="true" draggable="true"> </div>
                    <div data-drop-target="true" draggable="true"> </div>
                </div>

So how would I save the original word and compare it with the dragged box?