Asynchronous reading master detail data not working because of the async:true, otherwise it works

I have a list of persons and when I click on a icon I have a popover that shows details about that person and that works.
My problem is that it needs to be asynchronous.
I have a action result method that generates data based on a person Id and returns a view that is showed in a popover.
I now have that method as a async Task and inside it I use await.
But the problem is when in ajax call I use the attribute async:true, or remove it because of the default value that is true, nothing happens. It doesnt even register that I clicked on a button inside a table.
How to fix this?

If I set async to false it works as it should.

This is my c# code:

 [HttpGet]
        public async Task<ActionResult> PersonDetails(int id)
        {
            var model = await _context.Persons.Where(e => e.PersonId == id && e.Number > 5).ToListAsync();
            return View(model);
        }

This is my ajax call: 

$('.bInfoPerson').popover({
                title: setData,
                html: true,
                placement: 'left',
                container: 'body'

            });
        });
        function setData(id) {
            var set_data = '';
            
            var element = $(this);
            var id = element.attr("id");$.ajax({
                url: "/Home/PersonDetails/" + id,
                method: "GET",
                async: true,
                success: function (data) {
                    set_data = data;
                }, 
                error: function (jqXHR, textStatus, errorThrown) {

                    console.log(jqXHR.statusText + textStatus + errorThrown);
                }
            });
            return set_data;
        }

How can I fix this?