title: How to re-order table row numbers when rows are added and removed
body: <p>I am dynamically generating table rows using javascript (no jquery involved). Each row has 3 cells zone number, input, and a delete button. The number of rows added uses a select box to if they select 3, 3 rows are added ect. What I want to happen is if they add 3 rows then add another 3. the rows will be will displayed as 1,2,3,4,5,6, Currently its 1,2,3,1,2,3. I also what to re-order the rows when a row is deleted.</p>
  
  <p>Current code php file:</p>
  
  <pre><code>   function display_Zones($focus, $field, $value, $view){
  
      global $locale, $app_list_strings, $mod_strings;
  
      $html = '';
  
      if($view == 'EditView'){
  
          $html .= '&lt;script src="modules/dry_Zones/zone_items.js"&gt;&lt;/script&gt;';
          $html .= "&lt;div style='padding-top: 10px; padding-bottom:10px;'&gt;";
          $html .= "&lt;select id='zone' name='zone'&gt;";
          $html .= get_select_options_with_id($app_list_strings["zone_list"]);
          $html .= "&lt;/select&gt; ";
  
          $html .= "&lt;input type=\"button\" tabindex=\"116\" class=\"button\" value=\"addZone\" id=\"addZone\" onclick=\"insertZone()\" /&gt;";
          $html .= "&lt;/div&gt;";
  
          $html .= "&lt;table border='0' cellspacing='4' width='40%' id='zoneItems'&gt;";
          $html .= "&lt;tr&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;Motor Reference Point&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;";
  
          $html .= "&lt;/table&gt;";
  
  
  
          return $html;
      }
  </code></pre>
  
  <p>javascript file:</p>
  
  <pre><code> var num = 1;
  
   function insertZone() {
  
  var table = document.getElementById('zoneItems');
  
  var e = document.getElementById('zone');
  var number = e.options[e.selectedIndex].value;
  
  if(number != ''){
  
  
      for (var i=0; i &lt; number; i++)
      {
          var x = table.insertRow(-1);
          var a = x.insertCell(0);
          num = num+i;
  
          a.innerHTML = "&lt;span&gt;Zone: "+num+"&lt;/span&gt; ";
  
          var b = x.insertCell(1);
          b.innerHTML = "&lt;input type='text' name='motor_ref_point' size='18' value='' /&gt;";
  
          var c = x.insertCell(2);
          c.innerHTML = "&lt;button class='button lastChild' onclick='removeZone(this)' &gt;&lt;img src='themes/default/images/id-ff-clear.png'&gt;&lt;/button&gt;";
      }
  
  
  }
  </code></pre>
  
  <p>}</p>
  
  <pre><code>  function removeZone(rows) {
  
    var _row = rows.parentElement.parentElement;
    document.getElementById('zoneItems').deleteRow(_row.rowIndex);
  
  
  
     }          
  </code></pre>