JSFiddle - React, Tailwind, and code Playground

HTML

<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>

CSS

.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
}

JavaScript

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 tr:last').after('<tr><td>'+index+'</td></tr>')
  
};


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