ajax counter and save in bank

Question

I have a list in a table and put a column to display the amount of clicks when clicked.

But how could I trouble the value that comes from the bank and save.

Would it be by ajax? If yes, how would I:?

Below the code to get an idea.

.wis-numbers>span {
    margin-right: -1px;
    padding: 7px 12px;
    border: 1px solid #E0E0E0;
    float: left;
    font-weight: 500
}
.wis-numbers>span>i {
    line-height: 100%;
    vertical-align: top;
    position: relative;
    top: 3px;
    font-size: 15px;
    margin-right: 2px
}
.wis-numbers>span.active {
    color: #4CAF50
}
.zmdi-favorite-outline:before{
content:'\f15e'
}
.zmdi-favorite:before{content:'\f15f'}

<div class="wis-numbers">                                            
                                                        <span class="active"><i class="zmdi zmdi-favorite"></i> 78</span>
                                                    </div>

Answer 1

You can place your page that will receive the requests from ajax for whenever it is required to update in the database the value for one more and print the updated value.

The SQL command would be this:

UPDATE suaTabela SET suaColuna = suaColuna + 1;

Follow an example of ajax code:

let contador = document.getElementById('contador'); //elemento que vai ser clicado.
let contagem = document.getElementById('contagem'); //elemento que mostra a contagem.

contador.addEventListener('click', function(){
  let ajax = new XMLHttpRequest();
  let url = "SuaPaginaAqui";
  ajax.open("POST", url, true);
  ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  ajax.send();
  ajax.onreadystatechange = function() {
    if (ajax.readyState == 4 && ajax.status == 200) {
      contagem.innerHTML = ajax.responseText;
    }
  }
});