JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<div id="main">
  <div id="country">
    <div class="drag one">1</div>
    <div class="drag one">1</div>
    <div class="drag two">2</div>
    <div class="drag one">1</div>
    <div class="drag two">2</div>
    <div class="drag one">1</div>
    <div class="drag two">2</div>
    <div class="drag two">2</div>
  </div>

  <!-- |||||||||||||||||||||| -->

  <div id="part">
    <div class="drop" id="one">ONEE</div>
    <div class="drop" id="two">two</div>
  </div>
</div>

<!--  <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js" integrity="sha256-0YPKAwZP7Mp3ALMRVB2i8GXeEndvCq3eSl/WsAl1Ryk=" crossorigin="anonymous"></script> -->

CSS

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  /* 	-webkit-transition: all .07s linear;
	-o-transition: all .07s linear;
	transition: all .07s linear; */
}

body {
  margin: 0;
  padding: 0;
  background: url(grey.jpg) no-repeat top center / cover;
}

#main {
  min-width: 320px;
  max-width: 540px;
  /*border: 1px solid;*/
  background: rgba(192, 192, 192, .8);
  margin: 50px auto;
  overflow: hidden;
}

#country div {
  background: silver;
}


/* #country div:hover {
  border: 1px solid transparent;
} */

#country div,
#part div {
  width: 100px;
  /*background: #000;*/
  color: #fff;
  display: inline-block;
  margin: 15px;
  padding: 10px;
  text-align: center;
  border: 1px solid #E1D5D5;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#country div:hover {
  /*background: grey;*/
}

#part div {
  font: bold 16px Arial;
  padding: 25px 10px;
  cursor: default;
}

.ahover {
  background: rgba(255, 255, 255, .2);
}

JavaScript

var fnl = 0;
var l = $(".drag").length;

if (l != 0) {
  $(".drag").draggable({
    containment: "#main",
    scroll: false,
    revert: true,
    revertDuration: 100,
    // opacity: 0.6,
    stop: function() {
      $(this).hide();
    }
  });

  $('#one').droppable({
    accept: ".one",
    activeClass: 'ahover',
    drop: function() {
      // $(".drag").fadeOut();
      fnl++;
      //alert(fnl);
      // return fnl;
      // c+=fnl;
    }
  });

  $('#two').droppable({
    accept: ".two",
    activeClass: 'ahover',
    drop: function() {
      // $(".drag").fadeOut();
      fnl++;
      //alert(fnl);
      // return fnl;
      // c+=fnl;
    }
  });
  alert(l);
} else
  alert(l + " Ура");