I've read multiple answers that seem pretty straightforward, but none are working for me.

I have a javascript table:

$(document).ready(function () {

      var table = $('#data').DataTable({
        ajax: '/api/data',
        columns: [
          {
           className: 'dt-control',
           orderable: false,
           data: null,
           defaultContent: '',
           width:"15px"
          },
          {data: 'Lead ID'},
          {data: 'FirstName'},
          {data: 'Last Name'},
          {data: 'Company / Account'},
          {data: 'Email'},
          {data: 'Work Phone'},
          {data: 'Phone'},
          {data: 'Mobile'},
          {data: 'Create Date'},
          {data: 'Last Modified'},
          {data: 'Lead Status Life Cycle'},
          {data: 'Referring Rep E-Mail'},
          {data: 'Referring Rep Last Name'},
          {data: 'State/Province'},
          {data: 'IRK Sales Rep'},
          {
          className: 'qtemp',
          data: 'DLin'
          },
          {data: 'DLout'}
        ],
      });

And I want to click a cell in the className: 'qtemp' column and return the value, which I then send to a flask app. But I get 'undefined' when I try this:

$('#data tbody').on('click', 'td', function () {
<!--    var layout = $(this).data('rep');-->
        var layout = $(this).innerHTML;
     $.ajax({
      url: "/workstation",
      type: "get",
      data: {layout: layout},
      success: function(response) {
        var new_html = response.html;
        alert(layout);
      },
     });
  });

Is it because the table is produced with JS, and so innerHTML doesn't work?