JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://cdn.datatables.net/1.9.4/js/jquery.dataTables.js"></script>
</head>
<body>

<table id="confirm-table">
</table>

<script>
$(document).ready(function (){
    var dataSet = [
        [ "123", "System Architect" ],
        [ "456", "Accountant" ]
    ];

    table = $('#confirm-table').dataTable( {
        aaData: dataSet,
        aoColumns: [
            { sTitle: "Id" },
            { sTitle: "Job" }
        ],
        "aoColumnDefs":[ {
            "aTargets": [0],
            "fnRender": function ( oObj ) {
                return '<input type="checkbox">';
            }
        }]
    } );

    $('#confirm-table').on('click', 'input[type="checkbox"]', function() {
        var $row = $(this).closest('tr');
        var data = table.fnGetData($row[0]);
        var rowId = data[0];

        // I expect to get "123" or "456". But I am getting '<input type="checkbox">'
        alert(rowId);
    });

});
</script>
</body>
</html>