JSFiddle - React, Tailwind, and code Playground

HTML

<div class="questions">
  <div class="dragAble" name="quest" id="a">
    <p>a</p>
  </div>
  <div class="dragAble" name="quest" id="b">
    <p>b</p>
  </div>
  <div class="dragAble" name="quest" id="c">
    <p>c</p>
  </div>
</div>

</div>
<!-- end questions -->

<br />

<div class="answers">
  <div class="dropAble" name="answ" id="1">
    <p>1</p>
  </div>
  <div class="dropAble" name="answ" id="2">
    <p>2</p>
  </div>
  <div class="dropAble" name="answ" id="3">
    <p>3</p>
  </div>

</div>
<!-- end answers -->

<div id="win">
  DOBRZE
</div>
<div class="result" id="fail">
  ZLE
</div>

<button id="submit">Check</button>

CSS

#win,
#fail {
  display: none;
}

.dragAble {
  width: 160px;
  height: 37px;
  border: 1px solid #888888;
  background: #f0f0f0;
  margin: 10px 0;
}

.dragAble p,
.dropAble p {
  font-size: 15px;
  text-align: center;
  margin-top: 9px;
}

.dragAble p:hover,
.dropAble p:hover {
  cursor: default;
}

.dropAble {
  width: 160px;
  height: 37px;
  border: 1px dashed #888888;
  margin: 10px 0;
}

JavaScript

var correctAnswers = ['a-1', 'b-2', 'c-3'];
var results = [];

$('.dragAble').draggable({
  containment: "#content",
  cursor: "move",
  snap: ".dropAble",
});

$(".dropAble").droppable({
  drop: function(event, ui) {
    results.push($(ui.draggable).attr("id") + '-' + $(this).attr("id"));
  }
});

$("#submit").click(function() {
  console.log(results);
  result = true;
  $.each(results, function(index, value) {
    if ($.inArray(value, correctAnswers) == -1) {
      result = false;
    }

    if (!result) return;
  });

  if (result) {
    $("#win").show();
  } else {
    $("#fail").show();
  };
});