get value of TD to show in modal Javascript

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"></td>
                 <td scope="row" class="font-weight-bold"></td>
                 <td></td>
                 <td></td>
                 <td></td>
                 <td id="time">
                     
                 </td>

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

                 <td></td>
                 <td>
                     <a href="#" data-target="#extend" data-toggle="modal" data-id="" data-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="" data-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.

via Chebli Mohamed