JavaScript: Function that adds index number to my array elements keeps applying index numbers

Ok, so bit stumped on this one. I created a function, this function adds a number to the front of my array elements according to the arrays length. The hope here is that the end user get's to see the index number of their book when viewing their book list.

var myFormData = [];

  function addArrayElement() {
    for(i=0; i < myFormData.length; i++){       
    myFormData[i] = i+1 + ": " + myFormData[i] + "<br>";
    }

How would I check if the individual array elements already had the number and the breakpoint applied on printing it to HTML

.

Basically I just need to be able to add the index number and break-point to new elements of the array as the user submits them instead of applying it to everything already submitted.

I see the logic errors, I know each-time the for loop runs it's iterating over every element of the array and adding an index number and a break-point. I don't know how I would give each element an unique identifier without the for loop.

Is this possible to somehow achieve the same effect, by storing the specific index number of the array element and then somehow tacking it onto the output as it is printed to screen. Like so?

document.getElementById('booktitle').innerHTML = INDEXNUMBER + ":" +myFormData+join("<br>);

I think the number would always be static like this though. I'am not sure.

I don't know if this code is relevant, but these are the functions I use to print books to the HTML element & my handling of data submission to the array.

      function printBooks() {
        clearBook();
        alert("Sorting your books");
        //Function within the default sort method
        //The inital array.sort(); is case sensitive and ruined the sorting procedure
        //Had to refactor it in my code to make it sort correctly
        myFormData.sort(function(a,b){
        a = a.toLowerCase();
        b = b.toLowerCase();
        if(a == b) return 0;
        return a < b ? -1 : 1;
        });
        addArrayElement();
        document.getElementById('booktitle').innerHTML = myFormData;            
    }



     function submitData()
                         {     
        value1 = document.getElementById("myTextBox").value;
        var boxCheck = document.getElementById("myTextBox").value;
           if (boxCheck.length < 1)
              {
                alert("Search field is blank")   
              }
           else {
              myFormData.push(value1);
             alert("Data Contents: " + myFormData);
             alert("You have submitted:" + " " + value1 + " " + "to your library." )
             document.getElementById('booktitle').innerHTML = myFormData;          
           }
        }