Datatable Uncaught TypeError: Cannot read property 'mData' of undefined

Question

I'm using datatable to form a table by an array in Javascript:

<table class="table display" id='contest__table' style="width:100%">
</table>

var dataSet = [
        [ "player1", "1", "0", "upgrade level "],
        [ "player1", "2", "0", "upgrade level "],
        [ "player1", "3", "0", "upgrade level "],
        [ "player1", "4", "0", "upgrade level "],
        [ "player1", "5", "0", "upgrade level "],
        [ "player1", "6", "0", "upgrade level "],
        [ "player1", "7", "0", "upgrade level "],
        [ "player1", "8", "0", "upgrade level "],
        [ "player1", "9", "0", "upgrade level "],
        [ "player1", "10", "0", "upgrade level "]
    ];

    $(document).ready(function() {
        $('#contest__table').DataTable( {
               data: dataSet,
                    columns: [
                       { title: "Player" },
                       { title: "column1" },
                       { title: "column2" },
                       { title: "column3" }
                     ]
        } );
    } );

Codepen

The weird thing is that it works fine in codepen but it does not work in my website.

It always returns "Cannot read property 'mData' of undefined". Even though I'm using the exact same code & libraries. My table does not have anything inside table tag same as my codepen.

Please give me advice if you have experienced this.