Copy a value from an input into many other input with the same ID Drag and drop

I need to copy the value of an input in the specific position where it is released. My problem is that all the input have the same id, so the value is only copied in the first input of the form to be dragged. Try listing the id where you drop the items but the same problem happens before said

CODE THAT I NEED TO DRAG AND COPY TO MANY PLACES IF THE USER WISHES IT

 <draggable   id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<span draggable="true" id="drag"  ondragstart="drag(event)"   "> Matematica '<input type="hidden" id="asignar" value="45">     </span>';
</draggable>

HTML CODE where I release the elements

<td  ondrop="drop(event)" ondragover="allowDrop(event)""     type="text" name=""  >
<input type="hidden" value="" name="asignatura_id[2]"    id="asignatura_id">
</td>

Javascript

var prev;
function allowDrop(ev) {
    ev.preventDefault();  
}

function drag(ev) {
    //transferencia elemento a arrastrar
    ev.dataTransfer.setData("text", ev.target.id);
    prev = document.getElementById("div1").innerHTML;

}

function drop(ev) {
//Alojamiento de muchos elementos arrastrados
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
var clon = document.getElementById("div1");
clon.innerHTML = prev;

//Copio los datos de el input 1 al input 2 


var clonar = document.getElementById("asignar").value;
var actual = document.getElementById("asignatura_id").value=clonar;


}

I leave the code in JSBIN, so you can better understand the idea link