How to select element id in droppable method?

Question

I am learning jQuery and doing small project . I have big box and 4 smaller boxes, when I grab small box and drop it to big box , I want to see what id has small box. alert method show me undefined . Do you know how to fix this ? thanks

 <span class="box10" id="b">blue</span>  // this is one small box

const quizData = [
   {
     question : '1. Who created JS?',
     a: 'Musk',
     b: 'Eich',
     c: 'Mask',
     d: 'Pask',
     correct: 'b'
   }, ...
]

loadquiz()



function loadquiz() {

  const currentQdata= quizData[currentQuiz]
   $('.question').html(`<h5>${currentQdata.question}</h5>`)
   $('#a').html(`${currentQdata.a}`)
   $('#b').html(`${currentQdata.b}`)
   $('#c').html(`${currentQdata.c}`)
   $('#d').html(`${currentQdata.d}`)


   let box = $('.box10')
   box.draggable()
  
   $('.question').droppable({
    drop: function(e,ui) {
     const a = e.target.dataset.id
     alert(a)               // this is showing me undefined
     }
    })
  }