How to change span ID with each span created in loop

Question

I have the following piece of code:

compareHtml += " </tr><tr>";
      for (i = 0; i < compareArr.length; i++) {
        compareHtml += '<td><a href="" target="_blank">' + compareArr[i].journaltitle + '</a></td>';
        journalTitle.append('<span>' + compareArr[i].journaltitle + '</span> &nbsp;');
      }

And it creates a new span for each journalTitle. However, I want each new span to be created to have the ID "journalTitle1" "journalTitle2" "journalTitle3"....and so on.

Is this something that is possible? Currently they have no ID when created it is just a normal span.

I'll be naming my journal ``. Make sure you *sanitize* or correctly *escape* your inputs. — spender, Mar 11 '20 at 19:55
I am the one inputting the names of the products in the database, there is no type of user input on the web app, only sorting and viewing products that have been added. There is no type of user input. Is this still necessary? Do you have any advice on how to sanitize if necessary? — bicycle4431, Mar 11 '20 at 20:05
[This](https://stackoverflow.com/a/22706073/14357) looks promising. — spender, Mar 11 '20 at 20:07
@spender What does this prevent? If the users have no input field to enter anything into? — bicycle4431, Apr 11 '20 at 01:40

score 1 · Accepted Answer · answered Mar 11 '20 at 19:53

You can do like following

compareHtml += " </tr><tr>";
  for (i = 1; i < compareArr.length-1; i++) {
    compareHtml += '<td><a href="" target="_blank">' + compareArr[i].journaltitle + '</a></td>';
    journalTitle.append('<span id=journalTitle'+i+'>' + compareArr[i].journaltitle + '</span> &nbsp;');
  }

How to change span ID with each span created in loop

1 Answers1