JSFiddle - React, Tailwind, and code Playground

HTML

<button class="btn" data-treatment-id=1>
Hey, click me to use me!
</button>

<button class="btn" data-treatment-id=2>
Hey, click me to use me!
</button>

  <div id="make-sure-location" class="popup" style="padding: 30px;">
    <p class="tooltips-p" style="margin-top: 0;margin-bottom: 14px;">Make sure you're at the front desk.</p>
    <div>
      <button id="inside">Yes!</button>
      <button id="not-in" style=" background: transparent; color: #646464; margin: 0 auto; padding: 0; text-decoration: underline;">No.</button>
    </div>
  </div>

CSS

button {
      font-size: 12px;
    width: initial;
    height: initial;
    padding: 5px 14px;
    font-weight: 500;
    margin: 10px auto 0;
    
    background: transparent;
    box-shadow: inset 0 0 0 1px #46a4fb;
    z-index: 0;
    -webkit-transition: all 3s cubic-bezier(0.49, 0.01, 0.22, 1);
    -moz-transition: all 3s cubic-bezier(0.49, 0.01, 0.22, 1);
    -o-transition: all 3s cubic-bezier(0.49, 0.01, 0.22, 1);
    -ms-transition: all 3s cubic-bezier(0.49, 0.01, 0.22, 1);
    transition: all 3s cubic-bezier(0.49, 0.01, 0.22, 1);
    color: #46a4fb;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-tap-highlight-color: transparent;
}

#make-sure-location {
  background-color: lightgray;
  margin-top: 20px;
  display: none;
}

JavaScript

$('.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)
})