limit draggable events on Background event

Question

I have 3 draggable events and I want to be able to only drop 2 of them where the background event has only 2 empty slots. Third one should be rejected. How can I achieve this?

Eempty slots:

Also i got background events from SQL like this.

 $(function() {
    function ini_events(ele) {
      ele.each(function() {
        var eventObject = {
          title: $.trim($(this).text()),
          color: $(this).data('color')
        }
        $(this).data('eventObject', eventObject)
        $(this).draggable({
          zIndex: 1070,
          revert: true,
          revertDuration: 0,
        })
      })
    }
    var a;
    ini_events($('#external-events div.external-event'))

    $('#btnsave').on('click', function() {

    })
    var Calendar = FullCalendar.Calendar;
    var calendarEl = document.getElementById('calendar');
    var Draggable = FullCalendar.Draggable;
   <?php if (is_null($id)) { 
    } else {
      foreach ($adaylist[$id] as $a) { ?>
        var containerEl<?= $a['id'] ?> = document.getElementById('draggable<?= $a['id'] ?>');
        //var checkbox = document.getElementById('drop-remove');
        <?php
        $preaid = 0;
        if ($count == 0) {
          foreach ($veri as $v) {
            $hour = (intdiv($v['duration'], 60) . ':' . (($v['duration'] % 60) < 10 ? '0' . ($v['duration'] % 60) : ($v['duration'] % 60)));
            if ($preaid == $v['AssesmentId']) {
              continue;
            } else {
        ?>
              new Draggable(containerEl<?= $a['id'] ?>, {
                itemSelector: '.external-event',
                eventData: function(eventEl) {
                  return {
                    title: eventEl.innerText,
                    duration: '<?= $hour ?>',
                    backgroundColor: window.getComputedStyle(eventEl, null).getPropertyValue('background-color'),
                    borderColor: window.getComputedStyle(eventEl, null).getPropertyValue('background-color'),
                    textColor: window.getComputedStyle(eventEl, null).getPropertyValue('color'),
                    constraint: '<?= $v['AssesmentId'] ?>',
                  };
                }

              })
    <?php }
            $preaid = $v['AssesmentId'];
          }
        }
      }
    } ?>

    var counter = 2;
    var calendar = new Calendar(calendarEl, {
      locale: 'tr',
      initialView: 'dayGridMonth',
      firstDay: '1',
      headerToolbar: {
        left: 'prev,next today',
        center: 'title',
        right: 'dayGridMonth,timeGridWeek,timeGridDay'
      },
      themeSystem: 'bootstrap',
      selectable: true,
      editable: true,
      droppable: true,
      slotDuration: '00:15:00',
      slotMinTime: '08:00:00',
      slotMaxTime: '20:00:00',
      navLinks: true,
      drop: function(info) {
        info.draggedEl.parentNode.removeChild(info.draggedEl);
      },
events: [
        <?php
        foreach ($veri as $v) {
          $adaycount = $db->query("SELECT COUNT(*) FROM `adaycalendar` INNER JOIN assessdetails ON assessdetails.AssesmentId = adaycalendar.AssesmentId INNER JOIN assessdetailshours ON assessdetailshours.detailid = assessdetails.id WHERE adaycalendar.startDate = '" . $v['startDate'] . "' AND adaycalendar.startTime = '" . $v['startHour'] . "' AND assessdetailshours.endHour = '" . $v['endHour'] . "'")->fetchColumn();
          if ($adaycount == $v['count']) {
            continue;
          } else {
            $v['count'] -= $adaycount;
        ?> {
              groupId: '<?= $v['AssesmentId'] ?>',
              title: '<?= $v['count'] ?> empty slot',
              start: '<?= $v['startDate'] ?>T<?= $v['startHour'] ?>',
              end: '<?= $v['endDate'] ?>T<?= $v['endHour'] ?>',
              display: 'background',
              color: 'green',
            },
        <?php
          }
        }
        ?>
        <?php

v[count] is the limiter for background events. I tried to background events title and update it but I could not achieve this with eventReceive. I defined counter after draggable events code. For now just assign constant variable like 2.

eventChange:function(changeInfo){
        console.log(changeInfo);
      },
eventReceive: function(info, dropInfo) {
        var events = calendar.getEvents();
        console.log(info.event.start);
        for (var i = 0; i < events.length; i++) {
          if (events[i].display == 'background') {
            if (info.event.start.getDate() == events[i].start.getDate()) {
              eventChange(events[i].title);
            }
          }
        }
        counter--;
        if (counter == 0) {
          eventAllow(dropInfo)
        }
      },
  eventAllow: function(dropInfo) {
        if (counter > 0)
          return true;
      },

But it gave me an error:

Uncaught ReferenceError: eventChange is not defined