JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery-2.0.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<div id="left" class="drop">
<img id="tardis" ></img>
</div>


<input type="button" value="Get Companions" id="deal" />
<input type="reset" value="Reset" id="reset-pictures" />

CSS

.drop{
	float: left;
	width: 400px;
    height: 400px;
	border: 3px solid blue;
    background-image: url("http://debsiepalmer.com/images/tardis 2.jpg");
    background-repeat: no-repeat;
	background-size:  cover;
	}

.right {
    
    float: left;
	width: 250px;
    height: 400px;
	border: 3px solid red;
}

JavaScript

// global variables
var cardsInDeck = [],
    numberOfCardsInDeck = 5;
cardsInDeck[0] = "Ace";
cardsInDeck[1] = "Grace";
cardsInDeck[2] = "Susan";
cardsInDeck[3] = "Ian";
cardsInDeck[4] = "Barbara";
cardsInDeck[5] = "Brigadier";
cardsInDeck[6] = "Romana I";
cardsInDeck[7] = "K9";
cardsInDeck[8] = "Tegan";
cardsInDeck[9] = "Jamie";
cardsInDeck[10] = "Sarah Jane";
cardsInDeck[11] = "Jo";
cardsInDeck[12] = "Romana II";
cardsInDeck[13] = "Yates";
cardsInDeck[14] = "Leela";


//load "init" when document it's ready
$(document).on('ready',init);

function init() { 
  $( "#draggable" ).draggable({ containment: "#left"});
  $('.drop').droppable( {drop: handleDropEvent}); 
}

$('#deal').click(function () {
    dealAll();
});
$('#reset-pictures').click(function(){
    $('img.drag').remove();
    numberOfCardsInDeck = 5;
});
// deal 5 cards at once - works
function dealAll(){
    // 5 cards max, no repeat cards
    while(numberOfCardsInDeck){
        var rand = randomCard();
        dealCard(rand);
    }

}

//deal cards - works
function dealCard(i) {
    //create id, remove space id
    var id_picture = (cardsInDeck[i] +'-'+i).replace(/\s/g, '');
    //validate not exist image
    if (!!$('img#'+id_picture).length) {
        return;
     }

    var $img = $('<img/>', { src : "http://debsiepalmer.com/images/companions/" + cardsInDeck[i] + ".jpg", id : id_picture, class : 'drag', 'data-info': cardsInDeck[i]
                          })
    $('body').append($img);
    $('img.drag').draggable();
    numberOfCardsInDeck--;
    
}
// deal randomly - works
function randomCard() {
   return Math.floor(Math.random() * cardsInDeck.length);  
}


// this is what to do when card drops in tardis
function handleDropEvent( event, ui ) {
    alert(ui.draggable.attr("data-info"));
}