I am using the DataTables plugin to dynamically create tables with expandable child rows. A vars object contains all of the generated tables. The problem I'm having is that the tables child rows only expand for the last table that is generated. When trying to expand the child rows for the previous tables, nothing happens.

var row = x.row(tr); only returns a row when expanding a child row for last table that is generated. For the previous tables that are generated it returns an empty array and the child rows do not expand.

Code for generating tables:

vars = {};

for (var i = 0; i < shapes.length; i++) {

            var shapeType = shapes[i].points.length == 1 ? "Point" : "Line";

            document.getElementById("addCoordsScreen").innerHTML += '<div class="coordTableHeader">Shape(' + shapeType + '):</div><table id="coordinateTable' + i + '" class="display" style="width: 100%"></table><br/>';

            window.vars['tableName' + i] = $("#coordinateTable" + i).DataTable({
                data: dataSet,
                ordering: false,
                paging: false,
                searching: false,
                bInfo: false,
                columns: [
                    {
                        render: function (data, type, row) {
                            return "<span title='Add coordinates' class='fa fa-plus plusSymbol')'/>";
                        }
                    },
                    { title: "COLUMN1" },
                    { title: "COLUMN2" },
                    {
                        render: function (data, type, row) {
                            return "<span id='" + data[3] + "' class='fa fa-window-close fa-lg removeEN')'/>";
                        }
                    }
                ]
            }).draw();
        }

Code for expanding child rows:

$(document).on('click', ".plusSymbol", function () {
        $(this).closest('tr').find("span").toggleClass('fa-plus fa-minus');


        var tr = $(this).closest('tr');
        var tableId = $(this).closest('table').attr('id');
        tableId = tableId.split("coordinateTable")[1];
        var x = vars['tableName' + tableId];
        var row = x.row(tr);

        if (row.child.isShown()) {
            row.child.hide();
        }
        else {
            row.child(getChildRow(row.data())).show();
        }
    });