Issue With Clicks Inside Mousedown

I have multiple buttons that can be clicked by mousedown/touchstart, after 2 seconds, you get a popup to make sure, and you can click “yes” or “no”.

The issue comes when you click one, then select “no” and click another one. When logging the “data-id”, the first one clicked is the one passed, instead of the clicked one.

I thought this was an event.preventDefault(), event.stopImmediatePropagation issue, but this is not helping me at all, I don’t know what else to try anymore or know WHY this is happening.

Here’s a preview of the JS file:

$('.btn').on('mousedown touchstart', function (e) {
    e.preventDefault();
    e.stopImmediatePropagation();
    let button = $(this);
    console.log('Before setTimeOut: ', button.attr('data-treatment-id'));
    
    timer = setTimeout(async function() {
    $('#make-sure-location').show();
    
    $('#not-in').on('click', function(e) {
      console.log('not in location: ', button.attr('data-treatment-id'));
      e.preventDefault();
      e.stopImmediatePropagation();
      $('#make-sure-location').hide();
      clearTimeout();
    });

    $('#inside').on('click', function(e) {
      console.log('on location: ', button.attr('data-treatment-id'));
      e.preventDefault();
      e.stopImmediatePropagation();
    });
    
  }, 2000)
})

Here’s a working fddle:
https://jsfiddle.net/rj8ofLym/28/

To recreate issue:

1. MouseDown first button
2. Click “No” on div.
3. Check logs (correct “data-id”)
4. MouseDown second button
5. Click “No” on div.
6. Check logs (INcorrect “data-id” – still first one)