Interactive Rating Component with Flexbox

I used hidden radio buttons for the rating selections, but adding event listeners to the buttons themselves made the hit area undesirably small (you'd have to click the number itself in the middle of the circle to get it to register a choice). To get around this, I added the event listeners to the circular divs instead and then checked the button with js if they clicked the div and not the button itself. Which was kind of messy. Is there a better way to do this?

(I tried increasing the size of the radio button behind the div to match its size, but that didn't seem to work. It was hit or miss on clicking the button vs clicking the div)