Clicks counter using Javascript

Question

I’m trying to make a click counter.

Understand: I have a search bar that dynamically returns all service titles registered in the database. This process mediates between the PHP and the Javascript. But that’s been done.

If I type "Blog" in research, the javascript send the request and return the results found with that term. I set that the result came with a link to the service page and this is happening 100% smoothly.

It happens that I also want to account when this link is clicked, IE, I want to record in a table of the database every click occurred. However hard I try, I can not find a way to do this, I understand the logic but I am forgetting to do something or I could not formulate the logic of the process. I need you to help me.

I will leave here the script I am using. As a search can dynamically return more than 1 result, this loop was made inside a Function javascript. Get the parts straight:

- Search bar

<form id="searchForm">
    <div class="inner-form">
        <div class="input-field second-wrap">
            <input id="busca" name="pesquisar" type="text" placeholder="Qual serviço você está procurando?" />
            <div style="background: #efefef;">
                <ul id='results' style='list-style: none;margin: 0;'>
                </ul>
            </div>
        </div>
        <div class="input-field third-wrap">
            <button class="btn-search" id="btnSearch" type="button">
            Pesquisar
            </button>
        </div>
    </div>
</form>

- Detects typing to trigger the search function

document.getElementById("busca").onkeyup = function (e) {
    if(e.keyCode >= 65 && e.keyCode <= 90) {
        var q = this.value === "" ? "*" : this.value;
        sendSearch(q);
    }
};

- Send terms to PHP to perform the search

function sendSearch(q) {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.open("GET", "/sistema/Teste.php?val="+q, true);
    xmlhttp.onreadystatechange = function () {
        if(xmlhttp.readyState===4&&xmlhttp.status===200) {
            var json = JSON.parse(xmlhttp.responseText);
            var resultado = "";
            for(var i = 0; i < json.length; i++)
                resultado +=
                    "<li style='padding: 7px 0'><a data-click='' data-target='" + json[i].id +"' style='color: #48556b;' href='" + json[i].uri + "'><h5 class='m-0'>"+ json[i].nome +"</h5></a></li>";
            document.getElementById("results").innerHTML = resultado;
        }
    };
    xmlhttp.send();
}

Based on the html structure and the information that was inserted in the result loop of the javascript function, the script was created to account for the click

$("[data-click]").click(function () {
    let idClick = $(this).attr("data-target") ? $(this).attr("data-target") : $(this).html();

    $.ajax({
        url: '/sistema/Counter.php',
        data: {'idClick': idClick},
        type: 'GET',
        success: false
    });
});

- Finally, the PHP

//Counter.php
$id_click = $_GET['idClick'];

$count_click = $db->Executar("UPDATE servicos SET clicks = clicks + 1 WHERE id = '$id_click'");

I want that by clicking on this link, it goes to the service page but count the click as well. Following what I wrote I thought it would work but apparently the page Counter.php is not receiving the parameter idClick.

For anyone who can help me clarify what I am doing wrong or how I can change it to work, I will be grateful.

Thanks in advance to all who read and help with some suggestion.

Thank you.

NOTE: If you need additional information, please ask in the comments.