jquery ajax call not working inside gmail

Question

I have a requirement where a user needs to click on a link embedded inside Gmail's email sent through my MVC application. On click of the link, there should be no redirect and post back so basically, I am using Jquery Ajax call to perform the action inside my controller call. The problem is when I test the email body inside a plain HTML, the Ajax call works fine but when I click on the link through a test email sent to my Gmail it doesn't work. Below is my email template and Ajax call to the controller:

<div style="width:98%; border:none; color:#257abe; word-break:break-all">
Test Email Heading
<br /><br />

<br />
<div style="color:#257abe;">Test email body</div><br /><br />

Take Action:
<br /><a href="#" id="btnApprove"> Approve </a>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(
    function () { 
        $('#btnApprove').click(
            function () { 
                $.ajax({ 
                    url: 'http://localhost:53182/Users/Login', 
                    data: { id: 5 }, 
                    success: function (
                    data
                    ) { }, 
                    error: function (
                    xhr, ajaxOptions, thrownError) { 
                    alert(xhr.responseText); 
                    } 
                }); 
            }); 
        });
</script>