Getting table cell data

I have a table which shows all the work experience data of the user. What I'm trying to do is get the data value of the after clicking the row but I cant seem to get it trying different styles.

I tried data('key') but still not working. I tried putting it in attribute but it only returns undefined.

Here's my code in HTML

<table class="m-datatable" id="applicant_work_tbl" width="100%">
    <thead>
        <tr>
            <th title="Field #1" data-field="From">From</th>
            <th title="Field #2" data-field="To">To</th>
            <th title="Field #3" data-field="Employer">Employer</th>
            <th title="Field #4" data-field="Location">Location</th>
            <th title="Field #5" data-field="JobTitle">Job Title</th>
            <th title="Field #6" data-field="JobDescription">Job Description</th>
            <th title="Field #7" data-field="Certificate">Certificate</th>
            <th title="Field #8" data-field="Actions">Actions</th>
        </tr>
    </thead>
    <tbody id="work_tbody">
        <?php foreach ($work as $work) { ?>
            <tr class="work_row">
                <td class="td-from"><?php echo $work->from_date; ?></td>
                <td><?php echo $work->to_date; ?></td>
                <td><?php echo $work->company; ?></td>
                <td><?php echo $work->location; ?></td>
                <td><?php echo $work->job_title; ?></td>
                <td><?php echo $work->job_description; ?></td>
                <td><a target="_blank" href="<?php echo base_url().$work->attachment;?>">Certificate</a></td>
                <td id="work_id" data-key="<?php echo $work->experience_id; ?>"><button class="btn btn-brand btn-sm"><i class="fa fa-eye"></i> View</button></td>
            </tr>
        <?php } ?>
    </tbody>
</table>

Here's my code in javascript:

$('#applicant_work_tbl').on('click', '.work_row', function(){
    var from = $(this).find('td:nth-child(1)').text();
    var to = $(this).find('td:nth-child(2)').text();
    var company = $(this).find('td:nth-child(3)').text();
    var location = $(this).find('td:nth-child(4)').text();
    var job_title = $(this).find('td:nth-child(5)').text();
    var job_description = $(this).find('td:nth-child(6)').text();
    var attachment = $(this).find('td:nth-child(7)').text();
    var idx = $(this).find('td:nth-child(8)').data('key');

    console.log(idx);

    $('#modal_experience_id').val(idx);
    $('#modal_experience_employer').val(company);
    $('#modal_experience_from_date').val(from);
    $('#modal_experience_to_date').val(to);
    $('#modal_experience_job_title').val(location);
    $('#modal_experience_location').val(job_title);
    $('#modal_experience_job_description_summary').val(job_description);
    $('#modal_image_file').text(attachment);
    $('#work_modal').modal('toggle');
});

I wanna get the ID of the row using data attribute but I cant get it using this method. I hope you guys can help me out. Thanks.

UPDATE I figured it out. The attributes i defined in the table cells go missing whenever the datatable initializes. What I did is I transferred the attributes in either the button icon or in the button. Thanks for your help guys!