How to get dynamic value from html tag with foreach and save it to jquery variable for momentObj

Honestly i am not sure how to make a suitable title for this but basically i was trying to extract element from span tag with id=duration which comes dynamically from database with foreach, and use it to display timer for a duration with countdown.js, but i am confused as it is only extracting the first foreach value and not the rest beacause it has the same id i think. this is the view

<table cellpadding="0" cellspacing="0" border="0">
                    <tbody>
                        <?php foreach($status as $row): ?>
                            <tr>
                                <td><?php   echo $row->room_name;                         
                                ?></td>
                                <td>                            
                                    <?php if($row->user_name!=null)
                                        {
                                            echo $row->user_name;
                                            
                                        }else{ echo "Available"; }; 
                                    ?>
                                </td>
                                <td>
                                    <?php if($row->start_time!=null)
                                        {
                                            echo $row->start_time;
                                        }else{  echo "Available";}; 
                                    ?>
                                </td>
                                <td><span class="timer"><span id="duration"><?php if($row->start_time!=null)
                                        {
                                            echo $row->start_time;
                                        }else{  echo "Available";}; 
                                    ?></span></span></td>
                                <td>
                                    <?php if($row->status!=null)
                                        {
                                            echo $row->status;
                                        }else{ echo "Available";}; 
                                    ?>
                                </td>
                            </tr>
                        <?php endforeach ?>
                    </tbody>
                </table>
<script src="assets/home/js/jquery.min.js"></script>
<script src="assets/js/moment.min.js"></script>
<script src="assets/js/countdown.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/dynamic-marquee@1"></script>
<script>
var times = $('#duration').text();
    function update() {
        
        var addDay = /*$('#duration')*/ moment(times);
        $('#clock').html(moment().format('H:mm:ss')+ ' WIB');
        $('.timer').html(addDay.countdown().toString());
        console.log(addDay);
        console.log(times);
    }
    
    setInterval(update, 1000);

    $(window).on("load resize ", function() {
        var scrollWidth = $('.tbl-content').width() - $('.tbl-content table').width();
        $('.tbl-header').css({'padding-right':scrollWidth});
    }).resize();
</script>
<script>
    (function(){var countdown,moment,ref,ref1,slice=[].slice;countdown=(ref=typeof require==="function"?require("countdown"):void 0)!=null?ref:this.countdown;moment=(ref1=typeof require==="function"?require("moment"):void 0)!=null?ref1:this.moment;moment.fn.countdown=function(){var args,other;other=arguments[0],args=2<=arguments.length?slice.call(arguments,1):[];return countdown.apply(null,[this.toDate(),moment(other).toDate()].concat(slice.call(args)))}}).call(this);
    </script>

Answer

Since IDs must be unique only use a common class name. In addition you need to change each instance which for this case you can use text(function) which internally will loop over each instance.

Then you also want to start the initial start_time which you can do using a data- attribute. Now whenever you call update() you can get the initial value from that attribute and do calculations based on it.

Rather than manufacture some dates/times I created a very simple case that just adds one when called

function update(){
   console.log('Update called')
   $('.timer').text(function(){
       const start = $(this).data('start');
       // do calculations based on start value
       let newVal = start + 1;
       return newVal
   });
}

// only calling it once for simplicity
setTimeout(update, 2000)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1">
  <thead>
    <tr>
      <th>Room</th>
      <th>Start</th>
  </thead>
  <tbody>
    <tr>
      <td>Room 1</td>
      <td>
        <span class="timer" data-start="1">1</span>
      </td>
    </tr>
     <tr>
      <td>Room 2</td>
      <td>
        <span class="timer" data-start="2">2</span>
      </td>
    </tr>
  </tbody>
</table>

Advertisement

Answer