Hello Tina,

Regarding the total hour issue, you can consider looping the table each time the column related to the total hour is changed in order to update the value.

you can use the .change() method on the table or on the field itself to capture a change action. I've never done it before but your code will be something like this:
 

$(".tableClass").change(function(){

   $(".tableClass tr").each(function(){
     let startTime = //startTimeValue
     let FinishTime = //FinishTimeValue

     if(startTime != "" && finishTime !=""){
        
        let totalHoursValue = //computeNumberOfHours      
        $(this).find(".totalHoursFieldClass input").val(totalHoursValue)

     }
     
   })

})

Instead of looping through the whole table as well, you can also reach the last row of the table each time you are adding a new start and finish time and update its value accordingly. You can something like .last() to reach the last row of which you are adding the value. 

One more thing, I think (not able to test right now) you can use excel formula to do the job as well by allowing it to calculate the total hours based on the first two column of the table. I wish I can test it for you.  In that case, it will be more efficient since you are not running Javascript on each change in the  table. 

I hope i was able to help you with one of your concerns.

Joseph