Call ajax with onclick

I am trying to count the number of clicks of a specific part of my page.

I put an onClick to the element which makes a call to Ajax to store in a database for every click they make.

HTML code

<a id="tapaweb" href="hola.pdf" onclick="myFunction()" class="btn  js-scroll-trigger" download></a>
<a id="tapados" href="holapdf" onclick="myFunction()" class="btn  js-scroll-trigger" download></a>

JAVASCRIPT CODE

function myFunction() {
 $.ajax({
      url: 'contador.php',
      type: 'post',
      data: {id: 1},
      // en caso de éxito de la petición
      success: function(data) {
        console.log(data);
        }
       });
    }

FILE COUNTER.PHP

<?php
// obtengo el id del $_POST
 $id = $_POST["id"];
$mysqli = new mysqli("localhost", "usuario", "pass", "bdd"); 
// incremento en la db el contador 
$query = $mysqli->query("update contador set cantidad=cantidad+1 where 
id=1");

$mysqli->close();

?>

I go to the database and it does absolutely nothing! I appreciate your help. Greetings!