JSFiddle - React, Tailwind, and code Playground

HTML

<div class="drag"></div>
<div class="match"></div>
<div class="match"></div>
<div class="match"></div>

CSS

.drag {
  width:20px;
  height:20px;
  background:#0000ff;
}
.match {
  margin-top: 2px;
  width:50px;
  height:50px;
  background:#ff0000;
}

JavaScript

var play = [];
  var lastDropTarget;

  function make_drop_fn(i) {
    return function (event, ui) {
      if(this != lastDropTarget) {
        play[i]++;
        $(this).text(play[i]);
        lastDropTarget = this;
      }
    }
  }

  $('.drag').draggable();

  $('.match').each(function (i, m) {
    play[i] = 0;
    //alert(play[i]);
    $(m).droppable({
      greedy: true,
      drop: make_drop_fn(i)
    });
  });