I’ve a problem with javascript on a table, when a user click on a tr element of a table the row change class and the other rows return to the old class with this code:

 $(document).on("mousedown", "#orders_products_table > tr", function(e){
        e.preventDefault();
        let product = $(this).children("td").eq(0).text();
        let category = $("#orders_categoriesbt").text();
        switch(e.which){
            case 1:
                if(!$(this).is(":first-child")){
                    $("#orders_products_table > tr").removeClass("principal-tr-yellow");
                    $(this).addClass("principal-tr-yellow");
                    LoadAdditions(category, product);
                }
                break;
            case 3:
                if(!$(this).is(":first-child")){
                    $("#orders_products_table > tr").removeClass("principal-tr-yellow");
                    $(this).addClass("principal-tr-yellow");
                    $(this).contextmenu(function(e){
                        e.preventDefault();
                        $("#orders-context-menu").css("display", "block");
                        if((e.pageX + $("#orders-context-menu")[0].scrollWidth) >= $(window).width() && (e.pageY + $("#orders-context-menu")[0].scrollHeight) >= $(window).height()){
                            $("#orders-context-menu").css({
                                top: (e.pageY - $("#orders-context-menu")[0].scrollHeight) + "px",
                                left: (e.pageX - $("#orders-context-menu")[0].scrollWidth) + "px"
                            });
                        }else if((e.pageX + $("#orders-context-menu")[0].scrollWidth) >= $(window).width() && (e.pageY + $("#orders-context-menu")[0].scrollHeight) < $(window).height()){
                            $("#orders-context-menu").css({
                                top: e.pageY + "px",
                                left: (e.pageX - $("#orders-context-menu")[0].scrollWidth) + "px"
                            });
                        }else if((e.pageX + $("#orders-context-menu")[0].scrollWidth) < $(window).width() && (e.pageY + $("#orders-context-menu")[0].scrollHeight) > $(window).height()){
                            $("#orders-context-menu").css({
                                top: (e.pageY - $("#orders-context-menu")[0].scrollHeight) + "px",
                                left: e.pageX + "px"
                            });
                        }else{
                            $("#orders-context-menu").css({
                                top: e.pageY + "px",
                                left: e.pageX + "px"
                            });
                        }
                        row_selected = $(this);
                    });
                }
                break;
        }

The table is generated dynamically with an ajax call to a Flask server, but if the row is clicked before a second after it was generated, in the DOM automatically appear d__="" attribute on TD and change the text color from green to black.
DOM
HTML

<div id="div-center-products-tables">
            <div id="div-center-products-tables-products">
                <table id="orders_products_table" class="principal-table"></table>
            </div>
            <div id="div-center-products-tables-additions">
                <h3 class="principal-h1">{{langorders[session['lang']]['additions-title']}}</h3>
                <div id="div-center-products-tables-additions-contents"></div>
            </div>
        </div>

I’ve forced removing of attribute after 2 seconds and it works, but I don’t like as a solution.

function removeautoattr(){
    $("#orders_products_table > tr").children("td").removeAttr("d__");
}

function LoadProducts(category){
    $.ajax({
        type:"GET",
        url: "/orderspage_loadproducts",
        headers:{
            "Content-type":"application/json", 
            "Accept":"application/json"
        },
        data:{
            p_category: category
        },
        success:function(response){
            $("#orders_products_table").html(response["html"]);
            setTimeout(removeautoattr, 2000);
        },
        error:function(xhr, status, error){
            console.error(xhr);
        }
    });
}

Anyone now why d__ is automatically added to the DOM? Thanks in advance.

I made a timer to remove attribute d__ after 2 seconds, or block the function for 2 seconds before the user can click. Both works but I don’t like the solution.