How to control blur ccs effect?

Question

css

I have a table, by clicking on its line, a div with a length of this line and a little lower below it pops up

$(document).on('click', 'tr', function (e) {
    var cpossition = $(this).offset();
    var cwidth = $(this).width()
    $('div').offset({top:cpossition.top+25,left:cpossition.left});
    $('div').width(cwidth);
    $('div').show();
})

I want to make the whole table, except for the div, get the blur effect by clicking on this line, so I add to the code above:
$(’table').addClass('addblur‘)
class code:

.addblur {
    filter: blur(2px);
    -webkit-filter: blur(2px);
    -moz-filter: blur(2px);
    -o-filter: blur(2px);
    -ms-filter: blur(2px);
}

As a result, I get a blurred table without my pop-up divA, although it’s more accurate to say this div is hidden behind the table for some reason (you can see the silhouette at the edges)
How can I do everything right?

Answer 1

The div must not be inside a table with the "addblur" class.