Incrementing a number in a <td> with JQuery

Question

I have a perfectly working HTML Table, you will see that there is an empty <th> and in that corresponding <td>, there is a "1". What i'm trying to figure out, is how to increment that 1 to 2, etc.. whenever a new table is being generated.

var numRows = 2,
    ti = 5,
    tableCount = 1;

window.standBy = function() {
  var sum = 0;
  $(".Standby").each(function(index, stand) {
    sum += parseFloat($(stand).val());
  })

  $(".grandtotal").val(sum)
}

function calculate() {
  var tr = $(this).closest('tr');

  var hours = parseInt($(".Time2", tr).val().split(':')[0], 10) - parseInt($(".Time1", tr).val().split(':')[0], 10);
  if (hours < 0) hours = 24 + hours;
  $(".Hours", tr).val(hours);

  if (hours >= 4) $(".Standby", tr).val("1");
  if (hours <= 4) $(".Standby", tr).val("0.5");
  //if (hours==4 && hours<8) $(".Standby").val("1");

  if (hours >= 8 && hours <= 12) $(".Standby", tr).val("1.5");

  if (hours > 12) $(".Standby", tr).val("1.5");
}

$('#table').on('change', ".Time1,.Time2", calculate);
$('#table').find(".Time1").trigger('change')

window.addTime = function() {
  tableCount++;
  $('#timeTable').clone().attr('id', "timeTable" + tableCount).appendTo('#table');
  $('#timeTable' + tableCount).find("input").val("");
};

$(document).on('click', 'button.removeTime', function() {
  var closestTable = $(this).closest('table');
  if (closestTable.attr('id') != "timeTable") {
    closestTable.remove();
  }
  tableCount--;
  return false;
});

.tg {
  border-collapse: collapse;
  border-spacing: 0;
}

.tg td {
  font-family: Arial, sans-serif;
  font-size: 14px;
  padding: 10px 5px;
  border-style: solid;
  border-width: 1px;
  overflow: hidden;
  word-break: normal;
}

.tg th {
  font-family: Arial, sans-serif;
  font-size: 14px;
  font-weight: normal;
  padding: 10px 5px;
  border-style: solid;
  border-width: 1px;
  overflow: hidden;
  word-break: normal;
}

.tg .tg-yw4l {
  vertical-align: top
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Time format is in 24h</h1>

<div id="table">
  <table id="timeTable" class="tg">
    <tr>
      <th class="tg-yw41"></th>
      <th class="tg-yw41"></th>
      <th class="tg-yw4l">Start time</th>
      <th class="tg-yw4l">End time</th>
      <th class="tg-yw4l">Hours in total</th>
      <th class="tg-yw4l">Standby hours</th>
    </tr>
    <tr>
      <td>1</td>
      <td class="tg-yw4l"><button class="removeTime">Remove Time</button></td>
      <td class="tg-yw4l">
        <input class="Time1" value="" placeholder="Enter your start time" />
      </td>
      <td class="tg-yw4l">
        <input class="Time2" value="" placeholder="Enter your end time" />
      </td>
      <td class="tg-yw4l">
        <input type="text" class="Hours" value="0" readonly="" />
      </td>
      <td class="tg-yw4l">
        <input type="text" class="Standby" value="0" readonly="" />
      </td>
    </tr>
  </table>
</div>

<!-- EXAMPLE OF WHAT HAS TO BE GENERATED
<table class="tg">
  <tr>
    <th class="tg-yw41"></th>
    <th class="tg-yw4l">Start time</th>
    <th class="tg-yw4l">End time</th>
    <th class="tg-yw4l">Hours in total</th>
    <th class="tg-yw4l">Standby hours</th>
  </tr>
  <tr>
    <td class="tg-yw4l">2</td>
    <td class="tg-ywl"><input class="Time1" value="" placeholder="Enter your start time" /></td>
    <td class="tg-yw4l"><input class="Time2" value="" placeholder="Enter your end time" /></td>
    <td class="tg-yw4l"><input type="text" class="Hours" value="0" readonly="" /></td>
    <td class="tg-yw4l"><input type="text" class="Standby" value="0" readonly="" /></td>
  </tr>
</table>
-->

<caption>Total standby hours</caption>&nbsp;
<input class="grandtotal" value="" readonly="" />
<br>
<button onclick="addTime();">Add Time</button>
<br>
<button onclick="standBy();">Calculate total Standby hours</button>

I also have a working JSFiddle right here: http://jsfiddle.net/3q4v7q07/8/

Thank you all in advance for your kind help!

Answer 1

As your comment, After removing row and decreasing index, check it is less than 1.

If it is less than set it to 1 default.

if (tableCount < 1) {
    tableCount = 1;
}

var numRows = 2,
  ti = 5;
var tableCount = 1;
var index = 1;

window.standBy = function() {
  var sum = 0;
  $(".Standby").each(function(index, stand) {
    sum += parseFloat($(stand).val());
  })

  $(".grandtotal").val(sum)
}

function calculate() {
  var tr = $(this).closest('tr');

  var hours = parseInt($(".Time2", tr).val().split(':')[0], 10) - parseInt($(".Time1", tr).val().split(':')[0], 10);
  if (hours < 0) hours = 24 + hours;
  $(".Hours", tr).val(hours);

  if (hours >= 4) $(".Standby", tr).val("1");
  if (hours <= 4) $(".Standby", tr).val("0.5");
  //if (hours==4 && hours<8) $(".Standby").val("1");

  if (hours >= 8 && hours <= 12) $(".Standby", tr).val("1.5");

  if (hours > 12) $(".Standby", tr).val("1.5");



}
$('#table').on('change', ".Time1,.Time2", calculate);
$('#table').find(".Time1").trigger('change')


window.addTime = function() {
  tableCount++;
  $('#timeTable').clone().attr('id', "timeTable" + tableCount).appendTo('#table');
  $('#timeTable' + tableCount).find("input").val("");
  index++;
  $('#timeTable' + tableCount + ' .aa').html(tableCount);

};


$(document).on('click', 'button.removeTime', function() {
  var closestTable = $(this).closest('table');
  if (closestTable.attr('id') != "timeTable") {
    closestTable.remove();
  }
  tableCount--;
  if (tableCount < 1) {
    tableCount = 1;
  }
  return false;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h1>
  Time format is in 24h
</h1>

<div id="table">
  <table id="timeTable" class="tg">
    <tr>
      <th class="tg-yw41"></th>
      <th class="tg-yw41"></th>
      <th class="tg-yw4l">Start time</th>
      <th class="tg-yw4l">End time</th>
      <th class="tg-yw4l">Hours in total</th>
      <th class="tg-yw4l">Standby hours</th>
    </tr>
    <tr>
      <td class="aa">1</td>
      <td class="tg-yw4l"><button class="removeTime">Remove Time</button></td>

      <td class="tg-yw4l">
        <input class="Time1" value="" placeholder="Enter your start time" />
      </td>
      <td class="tg-yw4l">
        <input class="Time2" value="" placeholder="Enter your end time" />
      </td>
      <td class="tg-yw4l">
        <input type="text" class="Hours" value="0" readonly="" />
      </td>
      <td class="tg-yw4l">
        <input type="text" class="Standby" value="0" readonly="" />
      </td>
    </tr>
  </table>
</div>








<!--               //EXAMPLE OF WHAT HAS TO BE GENERATED
<table class="tg">
  <tr>
    <th class="tg-yw41"></th>
    <th class="tg-yw4l">Start time</th>
    <th class="tg-yw4l">End time</th>
    <th class="tg-yw4l">Hours in total</th>
    <th class="tg-yw4l">Standby hours</th>
  </tr>
  <tr>
  <td class="tg-yw4l">2</td>
    <td class="tg-ywl"><input class="Time1" value="" placeholder="Enter your start time"/></td>
    <td class="tg-yw4l"><input class="Time2" value="" placeholder="Enter your end time"/></td>
    <td class="tg-yw4l"><input type="text" class="Hours" value="0" readonly=""/></td>
    <td class="tg-yw4l"><input type="text" class="Standby" value="0" readonly=""/></td>
  </tr>
</table>
-->

<caption>Total standby hours</caption>&nbsp;
<input class="grandtotal" value="" readonly="" />
<br>
<button onclick="addTime();">Add Time</button>
<br>
<button onclick="standBy();">Calculate total Standby hours</button>

Answer 2

window.addTime = function() {
  tableCount++;
  $('#timeTable').clone().attr('id', "timeTable" + tableCount).appendTo('#table');
  $('#timeTable' + tableCount).find("input").val("");
};``

only copy tables.not new td or th

Answer 3

I would put a script tag inside the the looping table HTML code and use the numbers to set id's for each tag. Have js global vars that the script tag will track within the table loop.