How to re-render the table after updating a cell so the table understands that there is a new value

Hi! I am a newbie to DataTables and I encountered with a huge (for me) problem that I just don't get how to solve. Here is my live demo https://codepen.io/Balzzac/pen/mpdGgL with questions in certain places .

Let me try to explain: i have a table (id='js_table') that gets data from AJAX call (in codepen - from variable dataSet). It has 2 columns: "Assigned" and "Name". When data comes I render the first column, replacing "yes"/"no" with circles for type==="display" and with"assigned"/"not assigned" for "else", so it looks nice and provide a user the opportunity via clicking on the circle to assign or unassign a person.

When clicking on the circle (js_assign_element), JS runs a function where it replaces classes (from green to red and vice versa) as well as changing data-attributes into "assigned" when the person wasn't assigned and "not assigned" when person was. But the table itself doesn't "understand/recognize" the change, so it sorts and filters the first column like no changes were made.

$(document).off('click', '.js_assign_element').on('click', '.js_assign_element', function (event) {
     event.preventDefault();
    event.stopPropagation();
    if ($(this).hasClass("__assigned")) {
        $(this).removeClass("__assigned").attr("data-search", "not assigned").attr("data-filter", "not assigned").attr("data-sort", "not assigned").attr("data-order", "not assigned")
    }
    else
    {
        $(this).addClass("__assigned").attr("data-search", "assigned").attr("data-filter", "assigned").attr("data-sort", "assigned").attr("data-order", "assigned")
    }

    // Tried Following:
    // $("#js_table").DataTable().draw() - doesn't work
    // $("#js_table").DataTable().rows().invalidate("dom").draw() - doesn't work
    // $("#js_table").DataTable().rows().invalidate().draw() - doesn't work either
})

Can you please look and help me with my question(s)? Thanks