Event.preventDefault(); doesnt work in a post

I have click function on a generated JSON html table with links. These links should show rest JSON objects below table without reload the page. But now if i click on a link it will try to open a page. In this example just open same page. This is installed as plugin. I tested the code in a clean environment out of wordpress headers and it work. How can i prevent click event here? Thank you!

<?php
	get_header();
	 the_post();
?>

<?php
//https://stackoverflow.com/questions/21806992/how-to-cache-an-external-json-request
define( 'HOURS', 60 * 60 );

function get_api_info( ) {

    global $apiInfo; // Check if it's in the runtime cache (saves database calls)
    if( empty($apiInfo) ) $apiInfo = get_transient('api_info'); // Check database (saves expensive HTTP requests)
    if( !empty($apiInfo) ) return $apiInfo;

    $response = wp_remote_get('https://jsonplaceholder.typicode.com/users');
    $data = wp_remote_retrieve_body($response);

    if( empty($data) ) return false;

    $apiInfo = json_decode($data); // Load data into runtime cache
    set_transient( 'api_info', $apiInfo, 12 * HOURS ); // Store in database for up to 12 hours

    return $apiInfo;
}
// Make the WP_Error object global    
    global $json_error;
     
    // instantiate the class
    $json_error = new WP_Error;

$response = file_get_contents('https://jsonplaceholder.typicode.com/users');

			
					$someArray = json_decode($response, true);
					
					 
					   echo "<table>
							<tr>
							<th>id</th>
							<th>name</th>
							<th>email</th>
							
							</tr>";
							 foreach($someArray as $row):
							  echo "<tr>";
							  echo "<td>" . $row['id'] . "</td>";
							  echo "<td>" . $row['name'] . "</td>";
							  echo "<td ><a href=" . $row['id'] . " class='details'>" . $row['email'] . "</a></td>";
							 
							  echo "</tr>";
							endforeach;
							echo "</table>";
	
?>
<script>

$(".details").click(function(event){ 
	event.preventDefault();
	var uservarid = $( this ).attr( 'href' );
                $.getJSON('https://jsonplaceholder.typicode.com/users/'+uservarid, function(emp) { 
                    $('#userdetails').html('<p> Name: ' + emp.name + '</p>'); 
                    $('#userdetails').append('<p>Phone : ' + emp.phone+ '</p>'); 
                    $('#userdetails').append('<p> Company: ' + emp.company.name+ '</p>'); 
                    $('#userdetails').append('<p> Website: ' + emp.website+ '</p>'); 
                   
                }); 
            }); 

  

</script>
<?php
echo "<div id='userdetails'></div>";
?>
<?php
	get_footer();
?>