get value of TD to show in modal Javascript

Question

I have a dynamic table.

In the table above, I'm trying to get the value of the column Time Left. Here's my JS code:

$('#checkout').on('show.bs.modal', function(event){
     var button = $(event.relatedTarget)
     var id = button.data('id')
     var room = button.data('room')
     var timeleft = $("#tss").text();

     $("#id_checkout").val(id);
     $("#room_checkout").val(room);
     $("#timeleft").val(timeleft);

      console.log(timeleft)
});

And here's my blade.php

    <tbody>
         @foreach ($customers as $c)
             <tr class="item">
                 <td hidden class="row_id" id="row_id">{{$c->id}}</td>
                 <td scope="row" class="font-weight-bold">{{$c->room}}</td>
                 <td>{{$c->room_type}}</td>
                 <td>{{$c->name}}</td>
                 <td>{{$c->check_in_hrs}}</td>
                 <td id="time">
                     {{ $ymd = DateTime::createFromFormat('d F Y H:i:s', $c->time_out)->format('F d Y, h:i A') }}
                 </td>

                 <td id="tss" class="tss"> Please wait... // This is the column I'm trying to get.
                 </td>

                 <td>{{$c->assistant}}</td>
                 <td>
                     <a href="#" data-target="#extend" data-toggle="modal" data-id="{{$c->id}}" data-room={{$c->room}}>
                         <i class="fa fa-plus-circle lblue fa-2x" aria-hidden="true" href="#"></i>
                     </a>
                     <a href="#" data-target="#checkout" data-toggle="modal" data-id="{{$c->id}}" data-room={{$c->room}}>
                         <i class="fas fa-sign-out-alt red fa-2x"></i>    
                     </a>                                        
                 </td>
             </tr>
         @endforeach
     </tbody>

When I run my JS function, I only get the value of the first row of the table.