Заполните модальное окно значениями из <tr>

У меня есть таблица HTML с использованием DataTables.

У меня есть код, который дает каждому <tr> атрибут data-id. При щелчке по <tr> открывается модальное окно, соответствующее data-id. Я хочу взять значения элементов для выбранных и использовать их для заполнения полей в модальном окне. Однако я не смог понять, как получить значения элементов. Мой код:

<table id = "customers" class = "table table-hover" cellspacing = "0" width = "100%">
   <thead>
      <tr>
         <th>Name</th>
         <th>Position</th>
         <th>Office</th>
         <th>Age</th>
         <th>Start date</th>
         <th>Salary</th>
      </tr>
   </thead>
   <tfoot>
      <tr>
         <th>Name</th>
         <th>Position</th>
         <th>Office</th>
         <th>Age</th>
         <th>Start date</th>
         <th>Salary</th>
      </tr>
   </tfoot>
</table>
<script>
   var data = [
   [
   "Austin",
   "System Architect",
   "Edinburgh",
   "5421",
   "2011/04/25",
   "$3,120"
   ],
   [
   "Garrett Winters",
   "Director",
   "Edinburgh",
   "8422",
   "2011/07/25",
   "$5,300"
   ]
   ]
</script>
<!-- Modal -->
<div class = "modal fade slide-up disable-scroll" id = "infoModal" tabindex = "-1" role = "dialog" aria-hidden = "false">
   <div class = "modal-dialog ">
      <div class = "modal-content-wrapper">
         <div class = "modal-content">
            <div class = "modal-header clearfix text-left">
               <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true"><i class = "pg-close fs-14"></i>
               </button>
               <h5 id = "orderDetails"></h5>
               <p class = "p-b-10">some text will go here</p>
            </div>
            <div class = "modal-body">
               <div class = "row">
                  <div class = "col-md-12">
                  </div>
               </div>
            </div>
         </div>
      </div>
      <!-- /.modal-content -->
   </div>
</div>
<!-- /.modal-dialog -->
<!-- END PLACE PAGE CONTENT HERE -->
</div>
<!-- END CONTAINER FLUID -->
</div>
<!-- END PAGE CONTENT -->
<? include 'includes/footer.php'; ?>
</div>
<!-- END PAGE CONTENT WRAPPER -->
</div>
<!-- END PAGE CONTAINER -->
<? include 'includes/scripts.php'; ?>
<!-- Activate Customer Data Table -->
<script>
   $(function(){
        $('#customers').DataTable({
          data: data,
          'createdRow': function( row, data, dataIndex ) {
                $(row).attr('data-toggle', 'modal');
             $(row).attr('data-id', + dataIndex);
             $(row).attr('data-target', '#infoModal');
            }
        });
   });
</script>
<script>
   $(function(){
       $('#infoModal').modal({
           keyboard: true,
           backdrop: "static",
           show:false,

       }).on('show.bs.modal', function(){
             var getIdFromRow = $(event.target).closest('tr').data('id');
           //make your ajax call populate items or what even you need
           $(this).find('#orderDetails').html($('<b> Order Id selected: ' + getIdFromRow  + '</b>'));
       });

   });
</script>

Вот код, который я обнаружил, который делает то, что я хочу, но я не могу понять, как его реализовать.

$('#data-table').on('click', 'tr', function() {
    var first = $(this).find('td:eq(0)').text();
    var second = $(this).find('td:eq(1)').text();

    alert(first);
    alert(second);
});

Я знаю, что есть несколько сообщений с информацией о том, как получить значения a в a, но я не могу понять, как их реализовать в этом конкретном случае.