jQuery drag-drop get element of intended target when drop is disabled

Question

I have a page for a travel agency that I am building. To help the user plan their trip and estimate the cost, the page lets them create people tiles (.person-info), and drag/drop the tile into a hotel room (.hotel-person-drop).

Hotel rooms have a max capacity at 4 people, so once there are 4 people tiles in the droppable element, I am disabling the element with:

$('.hotel-person-drop').droppable({accept: '.person-info:not(.child-info, .adult-info)'});

You can have only 3 children per room, so once that limit is reached, I disable child people tiles the same way.

Regardless of how many adults and children, you can always add an infant to the hotel room which is why I cannot use .droppable('disabled') and instead disable by what classes are accepted.

This is all working great so far.

My issue is, I want to have a pop-up appear if the user tries to add a 5th person to the hotel room (or a 4th child). From what I can tell, once the droppable element has been disabled (no longer accepts the class .adult-info or .child-info), I can't access any of the droppable events (drop, out, etc.).

I have tried triggering the error pop-up with draggable events (stop, revert) but those trigger any time the draggable element is stopped or reverts, and not specifically when it was tried to drop into the now disabled droppable element (if that makes sense).

I'm thinking that because the droppable events are no longer triggering once a class is not accepted, I need a way to check the class of what the draggable element is hovering over right before it is dropped.

---

This is the draggable element code:

var person_draggable = {
    drag: function(e, ui){
      // code to reset values associated with each person.
    },
    helper: 'clone',
    appendTo: '#person-list', // #person-list is where all .person-info tiles are populated
    start: function(){
      $(this).css({'display':'none'});
    },
    stop: function(event, ui){
      personDragStop();
    },
    revert: function(droppableContainer){
      if (!droppableContainer) {
        console.log('show popup');
      }
    }
  };

$('.person-info').draggable(person_draggalbe);

('show popup' is getting logged anytime the draggable element reverts, and I would need a way to check if it was positioned over an element with a specific class if I use this)

---

And this is the Droppable element code:

  var hotel_droppable = {
    accept: '.person-info',
    drop: function(e, ui){
      // add ui.draggable to hotel room
      $(this).append($(ui.draggable).css({'left':'0px','top':'-1px'}));
    },
    out: function(e, ui){
     // code to do stuff if .hotel-person-drop is empty
    }
  };

$('.hotel-person-drop').droppable(hotel_droppable);

---

And this is the personDragStop function, which counts the number of people and the number of children in each .hotel-person-drop and disables future draggables by class

  function personDragStop(){

    // count adults and children and disable class accordingly
    $('.hotel-person-drop').each(function(){
      let person_count = 0;
      let child_count = 0;
      $(this).find('.person-info').each(function(){
        // don't count infants
        if ($(this).find('.person-info-age').val() !== '0-2') {
          person_count ++;
        }
        if ($(this).find('.person-info-age').val() == '2-12') {
          child_count ++;
        }
      });

      if (person_count == 4) {
        $(this).droppable({accept: '.person-info:not(.child-info, .adult-info)'});
      }
      if (person_count < 4) {
        // accept adult, and maybe accept child based on child_count and child_max
        if (child_count < 3) {
          $(this).droppable(hotel_droppable);
        } else {
          $(this).droppable({accept: '.adult-info, .person-info:not(.child-info)'});
        }
      }

    })

  }

---

TLDR: a very similar question was asked 8 years ago here JqueryUI draggable/droppable - Identify the drop target when the drop is invalid but the answer is just to use revert: function(){} and doesn't show a way to check for the class of the element that was disabled. The function will trigger if you drag it to any random spot on the page, rather than a specific element.