jQuery DataTable - element class is removed after sort

Question

I am developing a django app. In my HTML template I have a table, where one of the is 2 rows of that I am dynamically creating. This is the relevant td:

                             <td>
                                <div class="row">
                                    {% for d in p.get_list_of_lists %}
                                        <div class="a-box">{{ d.0 }}</div>
                                    {% endfor %}
                                </div>
                            <div class="row">
                                    {% for d in p.get_list_of_lists %}
                                        <div class="b-box">{{ d.1 }}</div>
                                    {% endfor %}
                                </div>
                            </td>

I am running a javascript function on document ready to dynamically add class to each of the a-box:

function createSquares() {
    $('.a-box').each(function () {
        a= this.innerText
        switch (a) {
            case "1":
                $(this).addClass('great')
                break;
            case "2":
                $(this).addClass('good')
                break;
            case "3":
                $(this).addClass('ok')
                break;
            case "4":
                $(this).addClass('tough')
                break;
            case "5":
                $(this).addClass('bad')
                break;
            default:
            // code block
        }
    });
}

Here is the code for the jQuery dataTable:

function createTable() {
    dt = $('#data')
    if (dt) {
        dt.DataTable({
            "order": [[3, "desc"]],
            "aLengthMenu": [[25, 50, 75, -1], [25, 50, 75, "All"]],
            "iDisplayLength": 25,
            'aoColumnDefs': [{
                'bSortable': false,
                'aTargets': ['nosort']
            }]
        });
    }
}

Everything is working well. I am able to color each box with the desired color. However, when I sort the table by one of its columns, some of the classes I added (great, good, ok, bad) are removed and some stay. I can't understand why and what is the difference between those who stay and those who don't.

Appreciate your help

Answer 1

I was able to solve the issue by moving the createSquares into createTable like suggested above.

function createTable() {
    dt = $('#Data')
    if (dt) {
        dt.DataTable({
            "order": [[4, "desc"]],
            "aLengthMenu": [[25, 50, 75, -1], [25, 50, 75, "All"]],
            "iDisplayLength": 25,
            'aoColumnDefs': [{
                'bSortable': false,
                'aTargets': ['nosort']
            }],
            "createdRow": function (row, data, index) {
                createFiveNext()
            }
        });
    }
}