Mulitple Draggables but fewer Droppables (drop zones)

Hello I am working with a matching template where I need multiple draggable elements to be dropped to fewer droppable zones for matching. I am trying to "tweak/convert" the code from a similar working template that ONLY uses the same amount of draggables (6) with the same amount of droppables (6) and they are parsed in an empty array that adds and later checks for matching the corresponding div IDs for both draggable elements and droppable zones. So what I tried to do (easiest solution I could think of) was for the dropzones NOT to use their div IDs but rather use and add classes IDs so I could have more than one draggable element match just one dropzone with multiple classes. It seems to work since as you will see in the code below I have a function Hint() and it works, the draggables (div IDs) are being dropped automatically to the corresponding droppable (class IDs) but when I hit the check button it tells me there is no match. I am aware that the Answer function has this:

function Answer (){ draggable_list_value[i] = true;

whereas the Counter function has:

function Counter (){ draggable_list_value[i] == true;

So I know that I could just put any combination and the Answer function will always have them to be "correct".

Conclusion?: So I guess that dropping draggables to just one dropzone with multiple classes and then verifying it is a nono? Does it have no way of checking which DropZone class ID is holding which draggable ID? It would seem to be "logical" that it should work. Is it just the way my js has been coded?

What I really want is:

1. To just work with classes. So that any amount of draggable elements that have classes e.g: ".cities or .countries match with the droppable zones' classes (.cities .countries.)

2. Also, the position of the elements inside the dropzones, I was using position but they all get stacked over each other =(.

I have already uploaded all the code in a fiddle here: https://jsfiddle.net/Pepois/24hov30f/7/

*Somehow the fiddle is not working it tells me the "verify function" is not defined etc... but I included the exact same code in a snipet code found all the way down this post and it works! (please scroll to the end, thank you).

Thank you for any input, I really do appreciate this beloved community, I have learned so much from it.

Warm regards Pepois

For this example I only used 3 draggable elements and only 2 droppable zones

HTML:

(Draggable divs)


<div id='Draggalbe_Column'>
  <div id='Draggalbe_Button00' class='Draggalbe_Button00 ui-draggable drag-drop countries'>
  Canada
  </div>
  <div id='Draggalbe_Button01' class='Draggalbe_Button00 ui-draggable drag-drop countries'>
  USA
  </div>
  <div id='Draggalbe_Button02' class='Draggalbe_Button01 ui-draggable drag-drop cities'>
  Chicago
  </div>
 </div>```

(Droppable divs)

<div id='Droppable_Column'>
<div id='Droppable_Container00' class= 'dropContainer Droppable_Container00 Droppable_Container01 countries' class='ui-droppable dropzone'>
<div id='Image1' class='image'>
<div id = 'ImageText' class='ImageText'>Countries</div>
</div></div>
<div id='Droppable_Container01' class= 'dropContainer Droppable_Container02 cities' class='ui-droppable dropzone'>
<div id='Image2' class='image'>
<div id = 'ImageText' class='ImageText'>Cities</div></div></div>

var draggable_list_value = [];
var ElementsQuantity = 3;
var AllSet = false;
var SolveAll = false;
var VisibleHelp = false;
var ResetActivity = true;
var Visible_Message= false;
var SolvedList= [];
var DraggablePosition=[], Draggable_ii=[];
var ChangeActivity = false;

$(start)
function start () {
message('','',1);
$('.ui-draggable').draggable('enable');
$('#Button_Check').addClass('Blocked');
$('#Button_TryAgain').addClass('Blocked');
if (!VisibleHelp)	{ $('#Button_Hint').css('visibility','hidden'); }

AllSet = false;
draggable_list_value = [];


if (ResetActivity)
 {
   Draggable_ii = [];
   DraggablePosition=[];	
for ( var i=0; i<ElementsQuantity; i++ ) {DraggablePosition.push( 22+(62.6*i) +'px');Draggable_ii.push(i);}
VectorRandom(Draggable_ii);
}

for (var i =0; i<ElementsQuantity; i+=1)
{
draggable_list_value.push(false);
var I=Draggable_ii[i];

$('#Draggalbe_Button0'+(i)).appendTo('#Draggalbe_Column').data('ubicacion_top',DraggablePosition[I]).data('DropId' , null).data('value', i).draggable({
containment: '#limit',
stack: '#Draggalbe_Column div',
cursor: 'move',
revert: true,
start: start_arrastre,
stop: quitar_movimiento
}).css('top', DraggablePosition[I]).css('left', '0px').removeClass('Correct')

/////////////////////////////////////////////////////////--
$('#Droppable_Container0'+(i)).appendTo('#Droppable_Column').data( 'DragId', null ).data('value', i).droppable({
accept: '#Draggalbe_Column div',
hoverClass: 'hovered',
drop: set
}).droppable('enable')
}

if ((SolveAll)
&& (!ResetActivity))
{
for(var i=0; i < SolvedList.length; i+=1)
      {
         var I = SolvedList[i];
         var DragR = $('#Draggalbe_Button0' + (I));
         var DropR = $('.Droppable_Container0' + (I));
         DragR.addClass('Correct').css('z-index',1);
         DragR.position({of:$('.Droppable_Container0'+(I)), my: 'left top', at: 'left top'});
         DragR.data('DropId', DropR);
         DropR.data('DragId', DragR);

         draggable_list_value[ I ] = true;

         //Habilitando los botones
         if ($('.Correct').length == ElementsQuantity)
         {
            AllSet = true;
            $('#Button_Check').removeClass('Blocked');
         }else{
            AllSet=false;
            $('#Button_Check').addClass('Blocked');
            $('#Button_TryAgain').addClass('Blocked');
         }
      }
}


$('#Draggalbe_Column').droppable({

accept: '#Draggalbe_Column div',
drop: restaurar
})

}

function dragMoveListener (event) {
  var target = event.target
  // keep the dragged position in the data-x/data-y attributes
  var x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx
  var y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy

  // translate the element
  target.style.webkitTransform =
    target.style.transform =
      'translate(' + x + 'px, ' + y + 'px)'

  // update the posiion attributes
  target.setAttribute('data-x', x)
  target.setAttribute('data-y', y)
}

function quitar_movimiento (event, ui) {
  $(this).removeClass('Drag_Movimiento');
}

function set (event, ui) {

//if (ui.draggable.data('dropId') != null){
//ui.draggable.data('dropId').droppable('enable');
//ui.draggable.data('dropId' , null)

/* -----------------------  <====  */
if ($(this).data('DragId') != null){

	var _Id;
     _Id = $(this).data('DragId');
     var V = _Id.data('value');
     draggable_list_value[V] = false;
 }

 $(this).data('DragId', ui.draggable);

   
 /*Sets a draggable in a droppable*/
  var _IdDrop;
 _IdDrop = ui.draggable.data('DropId');
 if (_IdDrop != null)
 {
      _IdDrop.data('DragId',null);
 }
 //*********************************
 ui.draggable.addClass('Correct');
 ui.draggable.draggable('option', 'revert', false);

 var IdContenedor = $('#Droppable_Container0' + $(this).data('value') );
 ui.draggable.position({of:IdContenedor, my: 'left top', at: 'left top'});
//center bottom
/*var Top = ui.draggable.css('top').replace('px','');
ui.draggable.css('top', (Top-2)+'px' );*/


ui.draggable.data('DropId', $(this));
/*$(this).droppable('disable');*/

var v= ui.draggable.data('value');
draggable_list_value[v]=($(this).data('value')==v);

/*-----  <==== */
if ($('.Correct').length == ElementsQuantity)
{
  AllSet = true;
  $('#Button_Check').removeClass('Blocked');
}
else
{
  AllSet = false;
  $('#Button_Check').addClass('Blocked');
  $('#Button_TryAgain').addClass('Blocked');
}
/*************/
var _Counter = Counter();
   if (_Counter>=draggable_list_value.length-1)
   {
     $('#Button_Hint').addClass('Blocked');
   }
   else
   {
     $('#Button_Hint').removeClass('Blocked');
   }

}

function restaurar (event, ui) {

var BotonId = ui.draggable;

if (ui.draggable.data('DropId') != null){
ui.draggable.data('DropId').data('DragId',null);
ui.draggable.data('DropId').droppable('enable');
ui.draggable.data('DropId' , null)
draggable_list_value[ui.draggable.data('value')]=false;
}

if (BotonId.hasClass('Correct')){

BotonId.removeClass('Correct')
var Top = BotonId.data('ubicacion_top');

BotonId.draggable('option', 'revert', false);
BotonId.css('top', Top )
.css('left', 0+'px' );

}
AllSet = false;
$('#Button_Check').addClass('Blocked');
$('#Button_TryAgain').addClass('Blocked');

//ui.draggable.position({of:$(this), my: 'center bottom', at: 'center bottom'});
}

function start_arrastre (event, ui) {
$(this).draggable('option', 'revert', true);
$(this).addClass('Drag_Movimiento');
}
function finalizar_arrastre (event, ui) {
$(this).removeClass('Drag_Movimiento');
}

function VectorRandom(L) {
var E,R;
for ( var i=0; i<L.length; i+=1 )
{
R = Math.round(Math.random() * L.length);
R = (R<L.length-1)?R:L.length-1;
E = L[R];
L.splice(R, 1);
L.push(E);
}

L.reverse();
}

function Reset() {
$('#Draggalbe_Button00').css('pointer-events','auto');
$('#Draggalbe_Button01').css('pointer-events','auto');
$('#Draggalbe_Button02').css('pointer-events','auto');
$('#Draggalbe_Button03').css('pointer-events','auto');
$('#Draggalbe_Button04').css('pointer-events','auto');
$('#Draggalbe_Button05').css('pointer-events','auto');
if ((AllSet)&& (!$('Button_TryAgain').hasClass('Blocked')))
{
if( Visible_Message==true)
{
$('#Button_Hint').css('visibility','visible');
Visible_Message=false;
}

VisibleHelp = true;
ResetActivity = true;
$(start);
}
}

function Verify () {
$('#Button_TryAgain').removeClass('Blocked');
if (AllSet)
{

ChangeActivity=true;

for(var i=0; i<ElementsQuantity ; i+=1)
{
if (draggable_list_value[i]==false)
{
ChangeActivity=false;
break;
}
}
if (ChangeActivity)
{
message('Good!','', 1);
$('.ui-draggable').draggable('disable');

$('#right_arrow').css('visibility', 'visible');
$('#Button_Check').css('visibility', 'hidden');
$('#Button_TryAgain').css('visibility', 'hidden');
$('#Button_Hint').css('visibility', 'hidden');
$('#Button_Answer').css('visibility', 'hidden');
$('#Draggalbe_Button00').css('pointer-events','none');
$('#Draggalbe_Button01').css('pointer-events','none');
$('#Draggalbe_Button02').css('pointer-events','none');
$('#Draggalbe_Button03').css('pointer-events','none');
$('#Draggalbe_Button04').css('pointer-events','none');
$('#Draggalbe_Button05').css('pointer-events','none');
}

else
{
Visible_Message=true;
message('Try one more time','', 0);
$('.ui-draggable').draggable('disable');
$('#Button_Check').addClass('Blocked');
$('#Button_Hint').css('visibility', 'hidden');
$('#Button_Answer').css('visibility', 'hidden');
$('#Draggalbe_Button00').css('pointer-events','none');
$('#Draggalbe_Button01').css('pointer-events','none');
$('#Draggalbe_Button02').css('pointer-events','none');
$('#Draggalbe_Button03').css('pointer-events','none');
$('#Draggalbe_Button04').css('pointer-events','none');
$('#Draggalbe_Button05').css('pointer-events','none');
}
}
}

function BT_Message () {
message('');
if (!ChangeActivity)
{
$('#Button_Hint').css('visibility','visible');
VisibleHelp = true;
ResetActivity = true;
$(start);
}
else{
$('.ui-draggable').draggable('disable');
}
}

function message (texto, texto2, a) {

if (texto!= ''){

if (a ==0)
{
document.getElementById('Message').style.color='white';
}
if(a==1)
{
document.getElementById('Message').style.color='white';
document.getElementById('Message').style.textShadow='0px 0px 7px #white';
}
document.getElementById('Message').innerHTML=texto;
document.getElementById('Sub_Message').innerHTML=texto2;
document.getElementById('message_modal').style.visibility= 'visible';
}
else{
document.getElementById('message_modal').style.visibility= 'hidden';
}
}


function Counter () {

  var Correct_Quantity=0;
        for(var i=0; i<ElementsQuantity ; i+=1)
      {
        if (draggable_list_value[i]==true)
        {
        Correct_Quantity+=1;
        }
      }

      return Correct_Quantity;
}


function Hint() {
  var _Counter = Counter() ;

  if (_Counter<draggable_list_value.length-1)
  {

  ResetActivity = false;
   
  SolveAll = true;

  /**************/
  

  //Verificando los que estan colocados correctamente
  SolvedList = [];
  var RandomI = [];

  for (var i =  0; i < ElementsQuantity; i++){
    if ( draggable_list_value[ i ] ){
      SolvedList.push( i );
    }else{
      RandomI.push(i);
    }
  }
  /*Colocando una pieza random*/
  if (RandomI.length>0)
  {
    var r = Math.round(Math.random() * (RandomI.length-1));
    SolvedList.push( RandomI[r] );
  }

  if (_Counter>=draggable_list_value.length-2)
  {
    $('#Button_Hint').addClass('Blocked');
  }
  /**************/
  $('#Button_Answer').css('visibility','visible');
  VisibleAnswer = true;
  message('','', 0);    
  $(start);
 }
}

function Answer () {
  //ANSWER
  for(var i=0;i<ElementsQuantity;i+=1)
  {
     var Drag = $('#Draggalbe_Button0' + (i));
     var Drop = $('.Droppable_Container0' + (i));
     Drag.addClass('Correct');

     Drag.position({of:$('.Droppable_Container0'+ (i)), my: 'left top', at: 'left top'});
     Drag.draggable('disable');

     draggable_list_value[i] = true;
  }
  AllSet = true;

  $('#Button_Hint').addClass('Blocked');
  $('#Button_Answer').addClass('Blocked');
  $('#Button_TryAgain').addClass('Blocked');
  $('#Button_Check').removeClass('Blocked');
}

/*Link*/
function ArrowClick (id, arrow) {
 if (arrow==0){
   /*URL Atras*/
   Link_Anterior();
 }else{
   if (ChangeActivity){/*URL Adelante*/Link_Siguiente();}
 }
}
#MainDiv{
 position: absolute;
 left: 50%;
 top: 0px;
 transform: translate(-50%, 0%);
 -webkit-transform: translate(-50%, 0%);
 -moz-transform: translate(-50%,0%);
 -ms-transform: translate(-50%, 0%);
 -o-transform: translate(-50%, 0%);
width: 1260px;
height: 540px;
background-size: 100% 100%;
user-select:none;
-webkit-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
-ms-user-select:none;
cursor: default;
background-color: gray;
font-family: Calibri;
}

#activity_background{
position: absolute;
float: left;
width: 1260px;
height: 400px;
margin-top: 70px;
margin-left: 3px
}
#limit{
position: absolute;
float: left;
width: 1100px; 
height: 406px;
background-size: 100% 100%;
background-color: rgba(255,255,255, 0);
margin-left: 50%;
transform: translate(-50%, 0%);
-webkit-transform: translate(-50%, 0%);
-moz-transform: translate(-50%, 0%);
-ms-transform: translate(-50%, 0%);
-o-transform: translate(-50%, 0%);

}
#activity{
position: relative;
float: left;
top: -1%;
width: 1100px; 
height: 400px;
background-size: 100% 100%;
margin-left: 50%;
transform: translate(-50%, 0%);
-webkit-transform: translate(-50%, 0%);
-moz-transform: translate(-50%, 0%);
-ms-transform: translate(-50%, 0%);
-o-transform: translate(-50%, 0%);
}
#Draggalbe_Column{
position: relative;
float: left;
top: .7%;
width: 600px;
height: 100%;
}	
.ui-draggable{
position: absolute;
background-color: orange;
background-size: 100% 100%;
width: 250px;
height: 52px;
background-repeat: no-repeat;
float: left;
font-family: Calibri;
font-weight: bold;
color: white;
font-size: 100%;
text-align: center;
line-height: 50px;
cursor: pointer;
}
.ui-draggable:hover{
background-color: rgba(255,255,255, 0.6);
}
.Drag_Movimiento{
background-color: orange !important;
}
#Droppable_Column{
position: absolute;
float: left;
width: 448px;
height: 100%;
margin-left: 56%;
padding-top: 1.4%;
}
.ui-droppable{
margin: 0px;
width: 213px;
height: 74px;
float: left;
margin-bottom: 10px;
margin-left:10px;
}
#Droppable_Container00{
margin-left: -1.3%;
}
#Droppable_Container01{
margin-left: 8.7%;
}
.image {
width: 213px;
height: 74px;
margin-top: -32%;
margin-left: -2%;
z-index: 20;
}
.ImageText{
font-family: Calibri;
font-size: 23px;
font-weight: bold;
color: white;
text-align: center;
}
.Buttons{
position: absolute;
background-color: red;
width: 88px;
height: 32px;
background-size: 100% 100%;
background-repeat: no-repeat;
float: left;
font-family: Calibri;
font-weight: bold;
color: white;
font-size: 100%;
text-align: center;
line-height: 30px;
font-size: 11pt;
cursor: pointer;
text-shadow: 0px 0px 3px rgb(83,70,62);
top: 500px;
}

#Button_Check{
left: 800px;

}
#Button_TryAgain{
left: 700px;

}
#Button_Hint{
visibility: hidden;
left: 500px;

}

#Button_Answer{
 visibility: hidden;
 left: 600px;

}

.Buttons:hover{
background-color: yellow;
border-radius: 5px;
}

.Buttons:active{
background-color: green;
border-radius: 5px;
}
 
#left_arrow{
position: absolute;
float: left;
width: 77px;
height: 128px;
margin-left: 0px;
top: 206px;
cursor: pointer;
background-color: brown;
background-size: 100% 100%;
color: white;
font-weight: weight;
text-align: center;
line-height: 125px;
z-index: 100;
}
#right_arrow{
position: absolute;
float: left;
width: 77px;
height: 128px;
margin-left: 1185px;
margin-top: 206px;
cursor: pointer;
background-color: brown;
background-size: 100% 100%;
color: white;
font-weight: weight;
text-align: center;
line-height: 125px;
z-index: 100;
visibility: hidden;
}
#left_arrow:hover{
transform: scaleX(1.1) scaleY(1.1);
-moz-transform: scaleX(1.1) scaleY(1.1);
-o-transform: scaleX(1.1) scaleY(1.1);
-webkit-transform: scaleX(1.1) scaleY(1.1);
}
#right_arrow:hover{
transform: scaleX(-1.1) scaleY(1.1);
-moz-transform: scaleX(-1.1) scaleY(1.1);
-o-transform: scaleX(-1.1) scaleY(1.1);
-webkit-transform: scaleX(-1.1) scaleY(1.1);
}
.Correct{
width: 203px !important;
height: 48px !important;
margin-top: 24px;
background-color: #02ff0247 !important;
font-size: 100% !important;
line-height: 44px !important;
}
.dropContainer{
position: relative;
float: left;
width: 200px;
height: 300px;
background-color: black;
margin-left: 4px;
margin-top: 70px;
}
#Message_background{
visibility: hidden;
position: absolute;
float: left;
width: 100%;
height: 100%;
background-color: black;
opacity: .7;
z-index: 100;
}
#message_modal{
visibility: hidden;
position: absolute;
float: left;
width: 555px;
height: 352px;
border-radius: 10px;
z-index: 101;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
}
#Message{
position: relative;
float: left;
width: 542px;
height: 100px;
margin: 50px 6px;
font-family: Calibri;
font-weight: bold;
font-size: 20pt;
line-height: 260px;
text-align: center;
}
#Sub_Message{
position: relative;
float: left;
width: 542px;
height: 80px;
margin: 0px 6px;
font-family: Calibri;
font-size: 11pt;
line-height: 0px;
text-align: center;
color:white;
}
.Blocked{
opacity: .5;
cursor: default !important;
pointer-events: none;
}
<html><head><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script><script src="https://code.jquery.com/ui/1.8.9/jquery-ui.js"></script></head><body><div id = 'MainDiv'><div id='activity_background'><div id='limit'></div><div id='activity'><div id='Draggalbe_Column'><div id='Draggalbe_Button00' class='Draggalbe_Button00 ui-draggable drag-drop countries'>
  Canada</div><div id='Draggalbe_Button01' class='Draggalbe_Button00 ui-draggable drag-drop countries'>
  USA</div><div id='Draggalbe_Button02' class='Draggalbe_Button01 ui-draggable drag-drop cities'>
  Chicago</div></div><div id='Droppable_Column'><div id='Droppable_Container00' class= 'dropContainer Droppable_Container00 Droppable_Container01 countries ui-droppable dropzone'><div id='Image1' class='image'><div id = 'ImageText1' class='ImageText'>
Countries</div></div></div><div id='Droppable_Container01' class= 'dropContainer Droppable_Container02 cities ui-droppable dropzone'><div id='Image2' class='image'><div id = 'ImageText2' class='ImageText'>
Cities</div></div></div></div></div></div><div id='Button_TryAgain' class='Buttons' onClick= 'Reset()'>
Try again</div><div id='Button_Check' class='Buttons' onClick= 'Verify()'>
Verify</div> <div id='Button_Hint' class='Buttons' onClick= 'Hint()'>
Help</div> <div id='Button_Answer' class='Buttons' onClick= 'Answer()'>
Solve</div> <div id='left_arrow' onClick= 'ArrowClick (this,0)'>Previous</div><div id='right_arrow' onClick= 'ArrowClick (this,1)'>Next</div><div id='Message_background'></div><div id= 'message_modal'><div id='Message'></div><div id='Sub_Message'></div></div></div></div></body></html>