JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<h4>Basket</h4>
<ul id="basket" class="basket">
   
</ul>

<ul id="semester1" class="semester">
   <!-- Drag courses here -->
</ul>

CSS

.courseBox {
  position: relative;
  width: 100%;
  height: auto;
  border: thin solid #999;
  padding: 0 0 0 10px;
  margin-bottom: 5px;
  border-radius: 5px;
  background-color: #d3d3d3;
  /*cursor: move;*/
}

.coursePts{
  position: absolute;
  bottom: -5px;
  right: 7px;
}

.courseBox button {
  position: absolute;
  top: 5px;
  right: 5px;
}

.basket{
  list-style-type: none;
  list-style-position: inside;
  margin: 0;
  padding: 0;
  min-height: 100px;
  border-radius: 5px;
  border: thin solid #999;
}

.semester {
  min-height: 100px;
  border: thin solid #999;
  border-radius: 5px;
  list-style-type: none;
  list-style-position: inside;
  margin: 0;
  padding: 0;
}

JavaScript

function createBox(item){
  var html = "";
  html += "<li class='courseBox' id='" + item.number +"'>" +
    "<h4 class='courseName'>" + item.name + "</h4>" +
    "<button class='btn btn-danger xOut'>X</button>" +
  "<p class='courseNumber'>" + item.number+ "</p>" +
  "<p class='coursePts'>ECTS: " + item.points + " pts</p>" +
  "</li>"
  return html;
};

var item = {"number": 02830, "name": "Placeholder", "points": 10};
  
var course = createBox(item);  

$("#basket").append(course)

$(".courseBox").draggable({
  revert: "invalid",
  containment: "document",
  cursor: "move"
});

  $(".semester").droppable({
    accept: ".courseBox",
    activeClass: "highlight",
    drop: function(event, d) {
      var target = $(this);
      moveCourse(d.draggable, target);
    }
  });

  $(".basket").droppable({
    accept: ".courseBox",
    activeClass: "ui-state-highlight",
    drop: function(event, d) {
      var target = $(this);
      moveCourse(d.draggable, target);
    }
  });

function moveCourse(item, target){
  var parent = item.parent();
  var boxId = item.attr("id");
  console.log(parent.attr("id") + " contains " + boxId);
  console.log("target is: " + target.attr("id"));
  parent.find(boxId).remove();
  target.append(item);
}