PHP AJAX按钮单击计数器

i want to make a button click counter. When you click the button the text from it changes, when the button is clicked i want to write to the database but i can't manage this.

<button type="button" class="btn btn-info" style="width:90%;" id="textChanger" onclick="counter;"><h4><i class="glyphicon glyphicon-earphone" aria-hidden="true">  </i> XXXX XXX XXX <h6>Show Number</h6></h4></button>

document.getElementById("textChanger").onclick= function(){
        document.getElementById("textChanger").innerHTML="<h4><i class=\"glyphicon glyphicon-earphone\" aria-hidden=\"true\">  </i> <?php echo $nrTelefonAnunt ?> </h4>";
         }

this is the code that i manage the text change, now what can i do to write to the database, i tried some methods but none worked

Try this

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<button type="button" class="btn btn-info" style="width:90%;" id="textChanger" onclick="counter;">1</button>
<script>
document.getElementById("textChanger").onclick= function(){
        var count = document.getElementById("textChanger").innerHTML;
        count = parseInt(count) + 1;
        document.getElementById("textChanger").innerHTML=count;
         }
</script>

</div>

Try this

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
 <button type="button" class="btn btn-info" style="width:90%;" id="textChanger" onclick="counter;"><h4><i class="glyphicon glyphicon-earphone" aria-hidden="true">  </i> <span>XXXXX</span> <h6>Show Number</h6></h4></button>

<script>
count=0;
 $(document).on("click","button",function(){
     count++;
     $('span').text(count);



  });  
</script>

Thanks everybody for the answers i manged by adding this:

$('#textChanger').click(function(){
    $.ajax({
        url : 'rate.php?idanunt="<?php echo $idAnunt ?>"', 
        type : 'post',  
        success : function(data){
        }
    });
});