title: How to create a new HTML element with content "i+1" with each iteration for an array of data
body: <p>I’m currently displaying some data from my database on my website, it’s a list of rows which each contain two elements, a “Name” and a “Score”. I’m displaying them correctly using some Jquery with Ajax which fetches them, dynamically creates a table for them, and then inserts each row into this table. </p>
  
  <p>Everything’s working perfectly, but as the scores are being returned from the database ordered by score descending, I would like to create a third element to be included in each row. I want this element to be a rank (like “1st”, “2nd”, “3rd” etc.), and I want it to appear at the beginning of each row. </p>
  
  <p>This is the Jquery that creates the table and inserts the data: </p>
  
  <pre><code>  function makeTable(data){
     var tbl_body = "";
        $.each(data, function() {
          var tbl_row = "";
          $.each(this, function(k , v) {
            tbl_row += "&lt;td&gt;"+v+"&lt;/td&gt;";
          })
          tbl_body += "&lt;tr&gt;"+tbl_row+"&lt;/tr&gt;";                 
        })
  
      return tbl_body;
    }
  </code></pre>
  
  <p>I’ve tried this:</p>
  
  <pre><code>  function makeTable(data){
     var tbl_body = "";
        $.each(data, function(var i = 0; i++) {
          var tbl_row = "";
          $.each(this, function(k , v) {
            tbl_row += "&lt;td&gt;"+v+"&lt;/td&gt;";
          })
          tbl_body += "&lt;tr&gt;"+tbl_row+"&lt;td&gt;"+[i+1]+"&lt;/td&gt;"+"&lt;/tr&gt;";                 
        })
  
      return tbl_body;
    }
  </code></pre>
  
  <p>In order to make an output that looks something like this:</p>
  
  <p><code>1  John Doe 1000
   2  Jane Doe 750
   3  Jack Daw 500</code></p>
  
  <p>But it’s not working. It’s probably relatively simple to create an extra element which counts up with each iteration but I’m unsure of the correct syntax to use to achieve this, any help would be really appreciated, thank you in advance!</p>