Generate number count by clicking

Question

Have some way to click on any element update the number of a tag for a higher value?

Ex: the value of tag standard is 1, being the tag n, n="1" by clicking the updated element to n="2" and so consecutively.

Answer 1

Can use setAttribute and increasing the value with each click addEventListener.

I put a counter on the buttons to illustrate, but if you visualize by "inspect element" browser, you will see that the attribute n is also being amended.

var els = document.querySelectorAll("#tags button");
for(x=0; x < els.length; x++){
   els[x].addEventListener("click", function(){
      var soma = parseInt(this.getAttribute("n"))+1;
      this.setAttribute("n",soma);
      this.innerText = soma;
   });
}

<div id="tags">
<button type="button" n="1">1</button>
<button type="button" n="1">1</button>
</div>

Answer 2

You can use a button that by clicking increments the value of the input or any other tag. Follow an example:

  var botao = document.getElementById('botao');
  botao.addEventListener("click", function() {
    var input = document.getElementById("input");
    var valor_atual = input.value;
    valor_atual++;
    input.value = valor_atual;
  });

Answer 3

If your goal is to mark only in the browser, follow an example. But as you indicated the PHP tag in the question... if you want to persist this count on the server, you will need to prepare a structure to store this information.

$('document').ready(function(){
  
  $('.tag').on('click', function(){
      var contador = $(this).attr('n');
      var total = ++contador;
      $(this).find('span:first').text(total);
      $(this).attr('n', total);
     
  });
});

div{
  background-color: #ccc;
  display:block;
  position:relative;
  min-width: 30px;
  float:left;
  padding: 5px 5px 5px 5px;
  margin: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tag" n="0"> tag (<span class="count">0</span>)</div>
<div class="tag" n="0"> outra tag (<span class="count">0</span>)</div>