Show the order at which buttons are clicked

I am trying to show the order at which buttons are clicked. For example I have the html

<button id="one" class="name">Hello</button>
<button id="two" class="name">Hello1</button>
<button id="three" class="name">Hello2</button>
<button id="four" class="name">Hello3</button>
<button id="five" class="name">Hello4</button>

If I click any button for the first time, for example let’s say third one with id=”three”, then it should show “1” on top of button. If I click it again it should say 1&2 and then if I clicked another button then that button should say 3 as it is clicked at 3rd position. So the whole thing is I am trying to show the position at which they are clicked and if they are clicked multiple times then show at which numbers they are clicked and join the numbers with “&”. PS: I am new to jquery/javascript so I am not able to figure out where to start to get the desired result.

Answer

$(function() {
 var click = 0;
$("button.name").click(function(){
  var current = $(this).text();
  var existingClicks = current.split(" ");
  if(existingClicks.length > 1) {
    $(this).text(current+" &"+(++click))
  }
  else {
    $(this).text("clicked = "+(++click))
  }
})
});

I think this code will do what you want to do without much editing in your HTML side. But I would suggest you to use better classnames for the elements.