JSFiddle - React, Tailwind, and code Playground

HTML

<div id="choice">
			<div id="vegetables" ondragenter="return false" ondragover="return false">LETTUCE AND SPINACH TO DRAG (NO LIMIT) 

				<div draggable="true" id="lettuce" class="veggies" ondragstart="drag(this, event)" >lettuce</div>

				<div draggable="true" id="spinach" class="veggies" ondragstart="drag(this, event)" >spinach</div>

			</div>
	
	
	
			<div id="bucket1" class="bucket" ondragenter="return false" ondragover="return false" ondrop="dropclone(this, event)">BUCKET1 can accept 1 lettuce and 1 spinach</div>
				<br></br>
			<div id="bucket2" class="bucket" ondragenter="return false" ondragover="return false" ondrop="dropclone(this, event)">BUCKET2 can accept 1 lettuce and 1 spinach</div>
    
	 </div>

CSS

#vegetables{
	        width:200px;
	        height:200px;
	        left: 500px;
	        border: 1px solid;
	        position:absolute;
	        font-weight:bold;

        }
		#bucket2, #bucket1 {
			width:200px;
	        height:120px;
			margin: 20px;
			padding: 10px;
			border: 1px solid;
			font-weight:bold;
            font: 12px arial;
		}
	
	
		.veggies {
			width:150px;
			height:30px;
			float:left;
			margin-left:10px;
			margin-top:10px;
			border: 1px solid;
			background-color:#28ba88;
		}

JavaScript

function drag(drop_target, e) {
					e.dataTransfer.setData('Text', drop_target.id);
				}
				function drop(drop_target, e) {
					var id = e.dataTransfer.getData('Text');
					drop_target.appendChild(document.getElementById(id));
					e.preventDefault();
				} 
				function dropclone(drop_target, e){     
					var elementoArrastrado = document.getElementById("lettuce"); // Elemento arrastrado
				
					var elementoClonado = elementoArrastrado.cloneNode(true); // Se clona el elemento //True clona el contenido tambien
					drop_target.appendChild(elementoClonado);
						
				}