HTML and JavaScript auto increment number

Question

I am new to HTML and JavaScript. I got a problem like this in HTML (This code below only visualize the problem for you to easy to reference.)

Answer 1

Edit: seems like the other solution posted would work do (was added while I typed this up).

You really should be using PHP to do something dynamic like this, which would become trivial with a single for loop.

However, if you insist on using HTML/Javascript (or perhaps this is a 'static page'...) then what you are asking should be possible.

You could add a class to each of the elements you want to use, so:

    i
    Harry


    i
    Simon

    i
    Maria


    i
    Victory

Then you would have a javascript function that does something like this:

var list = document.getElementsByClassName("personid");
for (var i = 1; i <= list.length; i++) {
    list[i].innerHTML = i;
}