How can i update the whole TD Columns in javascript?

How can i update the all TD, using javascript, base on what will the user will enter in date?

so for example.

select date: February 25, 2020        ```GO```

my table HOUR Column will be updated. without affecting the other columns. only the hour column will be updated and dynamic and the time will always start at 6PM and ends in 8AM so only the date will change base on the user input of date and if the go button is click.

ID  |  HOUR       |60 |30 |45 |0 |ADJUSTED |HG |STRETCH |UG |HC
1      Feb 25 6PM
2      Feb 25 7PM
3      Feb 25 8PM
4      Feb 25 9PM
5      Feb 25 10PM
6      Feb 25 11PM
7      Feb 25 12AM
8      Feb 26 1AM
9      Feb 26 2AM
10     Feb 26 3AM
11     Feb 26 4AM
12     Feb 26 5AM
13     Feb 26 6AM
14     Feb 26 7AM
15     Feb 26 8AM

how can i do this in javascript?

here is my current code in PHP

<div class="panel" id="two-panel">
                 <table class="table table-striped" id="user_set_goal_table" width="100%">
                         <thead>
                             <tr>
                                 <th>#</th>
                                 <th>Hour</th>
                                 <th>HC-60</th>
                                 <th>HC-30</th>
                                 <th>HC-45</th>
                                 <th>HC-0</th>
                                 <th class="th_red">Adjusted HC</th>
                           <th class="th_yellow">Hourly Goal</th>
                           <th class="th_yellow">Stretch</th>
                           <th class="th_yellow">Updated Goal</th>
                           <th class="th_green">Transfers/HC</th>
                             </tr>
                         </thead>
                         <tbody>
                        <?php $referenceDate = new DateTimeImmutable('today 07:00PM');?>
                        <?php
                         for($i=1;$i<=16;$i++){
                         ?>
                         <tr>
                             <td><?php echo $i; ?></td>
                             <td><?php echo $referenceDate->modify(sprintf("+ %s hours", $i))->format('M d, gA'); ?></td>
                            <td><?php echo "<input type='text'  id='hc_60_".$i."'"; ?></td>
                             <td><?php echo "<input type='text'  id='hc_30_".$i."'"; ?></td>
                            <td><?php echo "<input type='text'  id='hc_45_".$i."'"; ?></td>
                            <td><?php echo "<input type='text'  id='hc_0_".$i."'"; ?></td>
                            <td><?php echo "f".$i; ?></td>
                            <td><?php echo "g".$i; ?></td>
                            <td><?php echo "<input type='text'  id='stretch_".$i."'"; ?></td>
                            <td><?php echo "i".$i; ?></td>
                            <td><?php echo "j".$i; ?></td>
                         </tr>
                         <?php
                         }
                         ?>
                         </tbody>
                     </table>
                </div>

is there a way i can do this in javascript on how can i update the specific rows based on date? any help would be really appreciated.