title: How to count rows on dynamically created rows with javascript
body: <p>I am trying to make a system where I can create new rows and delete them too, I would like to have a counter that counts the row number of each individual row.</p>
  
  <p>Under "Num" I would like to have the row numbers displayed, but I can't figure out how to do so.</p>
  
  <p>EDIT </p>
  
  <ul>
  <li>I found a jQuery snippet that seems to count my first row, but not the newly created ones.</li>
  <li>Updated Fiddle with jQuery snippet</li>
  <li>Updated JS code with snippet in the top</li>
  </ul>
  
  <p>See my fiddle here: <a href="https://jsfiddle.net/pr05dw6p/14/" rel="nofollow">https://jsfiddle.net/pr05dw6p/14/</a> </p>
  
  <p>HTML code:</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="large-8 large-offset-2 columns"&gt;
          &lt;h2&gt;This is the table&lt;/h2&gt;
              &lt;form method="post"&gt;
                  &lt;table id="myTable" class="hover large-12 columns"&gt;
                    &lt;thead&gt;
                      &lt;tr&gt;
                        &lt;th&gt;Num.&lt;/th&gt;
                        &lt;th&gt;Name&lt;/th&gt;
                        &lt;th&gt;Height&lt;/th&gt;
                        &lt;th&gt;Width&lt;/th&gt;
                      &lt;/tr&gt;
                    &lt;/thead&gt;
                    &lt;tbody id="bannerTable"&gt;
                      &lt;tr&gt;
                        &lt;td&gt;&lt;p&gt;&lt;/p&gt;&lt;/td&gt;                      
                        &lt;td&gt;&lt;input type="text" name="name"&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;input type="number" name="height"&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;input type="number" name="width"&gt;&lt;/td&gt;
                      &lt;/tr&gt;
                    &lt;/tbody&gt;
                  &lt;/table&gt;
              &lt;/form&gt;
      &lt;/div&gt;    
  &lt;/div&gt;         
  
  &lt;div class="row"&gt;
      &lt;div class="large-4 large-offset-2 columns"&gt;
          &lt;button class="button expanded" onclick="newRow()"&gt;Add new row&lt;/button&gt;
      &lt;/div&gt;
      &lt;div class=" large-4 columns"&gt;
          &lt;button class="alert button expanded" onclick="deleteRow()"&gt;Delete latest row&lt;/button&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JS code:</p>
  
  <pre><code>//CREATE NEW BANNER - TABLE ROW COUNTER
  $('#bannerTable tr').each(function(idx){
      $(this).children().first().html(idx + 1);
  });
  
  
  //CREATE NEW BANNER - CREATE ROW
  function newRow() {
      var table = document.getElementById("bannerTable");
      var row = table.insertRow(1);
  
      var cell1 = row.insertCell(0);    
      var element1 = document.createElement('p');
          cell1.appendChild(element1); 
  
      var cell2 = row.insertCell(1);
      var element2 = document.createElement('input');
          element2.type="text", name="name";
          cell2.appendChild(element2);   
  
      var cell3 = row.insertCell(2);
      var element3 = document.createElement('input');
          element3.type="number", name="height";
          cell3.appendChild(element3);   
  
      var cell4 = row.insertCell(3);
      var element4 = document.createElement('input');
          element4.type="number", name="width";
          cell4.appendChild(element4);   
  }
  
  //CREATE NEW BANNER - DELETE ROW
  function deleteRow(){
      var table = document.getElementById("bannerTable");
      var rowCount = table.rows.length;
  
      if(rowCount&gt;1){            
          table.deleteRow(-1);
      }
  }
  </code></pre>