title: how to dynamically add Serial Number to every Split String that is appended to HTML <div> tag
body: <p><strong><em>functionality:</em></strong></p>
  
  <p>There are 10 different Strings-> "name,score,timer", hence I have split each string to each individual element and append to the  tag.</p>
  
  <p><strong><em>Issue:</em></strong></p>
  
  <p>I am able to split and append the split String to  tag, however, I am unable to dynamically set Serial number 1 to 10 for each appended element to the table  tag.</p>
  
  <p>Hence, the 10 different Strings when split will look like this:</p>
  
  <ol>
  <li>Name     Score     Timer</li>
  <li>Name     Score     Timer</li>
  <li>Name     Score     Timer</li>
  <li>Name     Score     Timer</li>
  <li>Name     Score     Timer</li>
  <li>Name     Score     Timer</li>
  <li>Name     Score     Timer</li>
  <li>Name     Score     Timer</li>
  <li>Name     Score     Timer</li>
  <li>Name     Score     Timer</li>
  </ol>
  
  <p>Issue is I am stuck on how to set the serial number to each line of the split element.</p>
  
  <p><strong><em>What has been done</em></strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(function() {
    //data are the 10 individual Strings that have been retrieved from database
    var playerList = data.split("@");
  
    var innerList;
    for (i = 0; i &lt; playerList.length; i++) {
      innerList = playerList[i].split(",");
      console.log(innerList[0] + "|" + innerList[1] + "|" + innerList[2]);
      $("#Player_Name").html(innerList[0]);
      $("#Player_Score").html(innerList[2]);
    }
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table id="Rugby_Scoreboard"&gt;
    &lt;tr&gt;
      &lt;td&gt;
        &lt;div id="Serial_Number" style="z-index:50; position:absolute; top:440px; left:100px; font-size:160px; font-family:'OpenSans-Light'; width:1080; color:#fff;"&gt;
          &lt;font face="OpenSans-Light"&gt;&lt;/font&gt;
        &lt;/div&gt;
      &lt;/td&gt;
  
      &lt;td&gt;
        &lt;div id="Player_Name" style="z-index:50; position:absolute; top:440px; left:500px; font-size:160px; font-family:'OpenSans-Light'; width:1080; color:#fff;"&gt;
          &lt;font face="OpenSans-Light"&gt;&lt;/font&gt;
        &lt;/div&gt;
      &lt;/td&gt;
  
      &lt;td&gt;
        &lt;div id="Player_Score" style="z-index:50; position:absolute; top:440px; left:1195px; font-size:160px; font-family:'OpenSans-Light'; width:1080; color:#fff;"&gt;
          &lt;font face="OpenSans-Light"&gt;&lt;/font&gt;
        &lt;/div&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>