Показать больше деталей в строке

Question

Как я могу отображать информационную строку внутри каждой строки внутри каждой строки при нажатии на крестик?

Когда я нажимаю кнопку, меняется только цвет без отображения div деталей

Здесьмой код:

<table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
    <thead>
        <tr>
            <th>
            </th>
            <th>
                # Act
            </th>
            <th>
                Name
            </th>
        </tr>
    </thead>
    <tbody>
        <tr data-child-value="hidden 1">
            <td class="details-control">
            </td>
            <td>
                test 1
            </td>
            <td>
                test 2
            </td>
        </tr>
    </tbody>
</table>

HTML-код работает правильно даже при добавлении кода JavaScript:

function format(value) {
    // alert("extra");
    return '<div>Hidden Value: ' + value + '</div>';
}
$(document).ready(function() {
    var table = $('#example').DataTable({
        "columnDefs": [{
            className: "details-control",
            "targets": [0]
        }]
    });
    // // Add event listener for opening and closing details
    $('tbody').on('click', 'td.details-control', function() {
        var tr = $(this).closest('tr'),
            row = table.row(tr);
        if (row.child.isShown()) {
            tr.next('tr').removeClass('details-row');
            row.child.hide();
            tr.removeClass('shown');
        } else {
            row.child(format(row.data())).show();
            tr.next('tr').addClass('details-row');
            tr.addClass('shown');
        }
    });
});

Datatable 1
Datatable 2