How to remove the highlight of a table row when the multiselect value contains "All" and highlight?

[Vasulaxnik]

Thanks to @niketn I can now click on a table row, and get the whole row highlighted as needed.

Step 1: When clicking on a row, the selected row is highlighted (Working OK)

What I am trying to do is:

Step2: I have multi-select inputs and when "All" is selected in multi-select, I want to remove the highlight from the table row.

Step3: Also would like to highlight multiple rows if more than one choice is selected in multi-select.

I am new to JS and tried the below JS  for Step 2 but it isn't working. Any help would be appreciated

require([

    'underscore',

    'jquery',

    'splunkjs/mvc',

    'splunkjs/mvc/simplexml/ready!'

], function(_, $, mvc) {

    // Access tokens via Default Token Model

    var defaultTokenModel = mvc.Components.get("default");

    // Search id in Simple XML is tableSearch. Get SearchManager object using the same

    var tableSearch = mvc.Components.get("tableSearch");

    // On click of Table cell with id=highlight, set the highlighted class for CSS Override

    // Fetch the highlighted row id from DOM.

    // For pagination will require:

    //    (i) Either Row ID as a table column to be fetched OR

    //    (ii) Use TableView to handle Custom Cell Renderer

    $(document).on("click", "#highlight table td", function() {

        // Apply class of the cells to the parent row in order to color the whole row

        $("#highlight table").find("td.highlighted").each(function() {

            $("#highlight table tr").removeClass("highlighted");

            $(this).parents("tr").addClass(this.className);

            // Set Table Row id to highlighted_row_id (This approach would need change for pagination)

            defaultTokenModel.set("highlighted_row_id", $(this).parents("tr").attr("data-row-index"));

        });

    });

    // When the Table Cell Completes, highlight previously selected Table Row.

    tableSearch.on("search:done", function(properties) {

        var highlighted_row_id = defaultTokenModel.get("highlighted_row_id");

        // setTimeout May not be required with Custom Cell Render.

        // But for Table Row Highlighting post 6.6 even with Custom Table Cell Renderer this is required.

        setTimeout(function() {

            $("#highlight table tr[data-row-index='" + highlighted_row_id + "']").addClass("highlighted");

        }, 100);

    });

    $('#multi'), on("change", function() {

        var multi = mvc.Components.get("multi");

        var tokens = mvc.Components.get("default");

        var mytoken = tokens.get("multi");

        if (mytoken.length > 1 && mytoken.includes("All")) {

            var highlighted_row_id = defaultTokenModel.get("highlighted_row_id");

            $("#highlight table tr[data-row-index='" + highlighted_row_id + "']").removeClass("highlighted");

        }

    });

});