jQuery - Get the parent sibling's ID with jQuery DataTables

Question

I'm trying to get a parent's sibling, but there's a strange phenomenon. Before jQuery DataTables is initizlied, I can get the table's ID without any problem. But after it is initialized, meaning the table build, I cannot get the ID anymore.

HTML:

<h2 class="sub-header">Chart
    &nbsp;&nbsp;&nbsp;
    <button type="button" class="btn btn-success">Hide</button>
    <button type="button" class="btn btn-success">PDF</button>
    <button type="button" class="btn btn-success">CSV</button>
    <button type="button" class="btn btn-success">Share</button>
    <button type="button" class="btn btn-success" id="config_1">Config</button>
</h2>

<table id="chartTable_1" class="display" cellspacing="0" width="100%"></table>

Javascript:

$("#config_1").click(function(event)
{
    $('#chartConfigModal').modal("show");
    openedConfig = $(this).parent().siblings().closest("table").attr('id');
    console.log(openedConfig);
});

Basically #config_1 is a button's ID. When this button is pressed, it will get that specific button's location, and work the way up to the parent, which is H2, and then get the closest sibling who is a table, and get it's id.

All this works before initialization of the table.

var table = $('#'+String(response.chartID[i])).DataTable({
    stateSave: true,
    aoColumnDefs: aryJSONColTable,
    processing: true,
    serverSide: true,
    bDestroy: true,
    ajax:
    {
        type: 'GET',
        url:"ajax_retrieveMainChartData/",
        dataType: 'json',
        data:
        {
            'csrfmiddlewaretoken':csrftoken,
            'activeTab':activeTab,
            'chartID':response.chartID[i],
        },
    },
    rowCallback: function(row, data)
    {
        if ($.inArray(data.DT_RowId, mainChartSelected)!== -1)
        {
            $(row).addClass('selected');
        }
    }, 

If I press view source, I will still get the exact html:

<h2 class="sub-header">Chart
    &nbsp;&nbsp;&nbsp;
    <button type="button" class="btn btn-success">Hide</button>
    <button type="button" class="btn btn-success">PDF</button>
    <button type="button" class="btn btn-success">CSV</button>
    <button type="button" class="btn btn-success">Share</button>
    <button type="button" class="btn btn-success" id="config_1">Config</button>
</h2>

<table id="chartTable_1" class="display" cellspacing="0" width="100%"></table>

After the table is created, when you try to get the table's attribute id again. It doesn't work. Why would it do this?

---UPDATE---

I did a console.log($(this).parent().siblings()); after initialization

[div#chartTable_1_wrapper.dataTables_wrapper.no-footer, prevObject: n.fn.init[1], context: button#config_1.btn.btn-success, jquery: "2.1.1", constructor: function, selector: ""…]0: div#chartTable_1_wrapper.dataTables_wrapper.no-footercontext: button#config_1.btn.btn-successlength: 1prevObject: n.fn.init[1]__proto__: Object[0]

Then a console.log($(this).parent().siblings()); before initialization

[table#chartTable_1.display, prevObject: n.fn.init[1], context: button#config_1.btn.btn-success, jquery: "2.1.1", constructor: function, selector: ""…]0: table#chartTable_1.display.dataTable.no-footercontext: button#config_1.btn.btn-successlength: 1prevObject: n.fn.init[1]__proto__: Object[0]

I'm getting two different siblings. It seems that the original ID isn't there anymore.

Answer 1

Try this:

$(this).parent().next("table").attr('id');