How can the View screen be hidden from the Jquery Selector search?

I have a problem with overlapping HTML id. The reason for this problem is that more than 100 screens are opened and used one at a time, and then they are turned into multi-tabs in an active state.

I was instructed not to modify the existing code as much as possible while implementing multi-tab. Many screens are similar, so many are copied and used. Therefore, there is a case where the HTML id, which is the problem I mentioned, is duplicated.

How can I implement multi-tap with no conflicts of id without modifying existing sources as much as possible?

I thought of a way. Copy the screen and put it in the data, and then create the screen again.
The problem is that I use js-based Web Grid, but when I call the screen again, the screen is not visible. I think it’s not a web grid problem. The button function that gives an alert when clicked initially works, but it did not work when it was reloaded.

HTML

<div id="flex_navi_btn_area"></div>
<div id="menuContent"></div>

Script (Jquery Use)

function menuCall(url, inner_url_yn, obj){
    let $navBtnWrap = $('.navButton.tab-content-'+obj.key);
    if ($navBtnWrap.length > 0) {
        $navBtnWrap.eq(0).click();
        return;
    } // Tab already exists
    let currentKey = $('#menuContent').data('key');
    if(currentKey != null && typeof currentKey != "undefined") {
        $('#flex_navi_btn_area').data('content-'+currentKey, $('#menuContent').clone());
    } // Save screen is use
    
    var params = '';
    ajaxCall(url, params, function(data){
        $('#menuContent').empty();
        $('#menuContent').append(data);
        $('#menuContent').data('key', obj.key);
        addTab(url, obj);
    });
}

function addTab(url, obj) {
    $('#flex_navi_btn_area .navButton').removeClass('on'); // For css
    $('#flex_navi_btn_area').append(`<div onclick="selectTab($(this))" data-key="`+obj.key+`" class="navButton on tab-content-`+obj.key+`">`+obj.title+`</div>`); // Tab html
}

function selectTab($selectedTab) {
    let currentKey = $('#menuContent').data('key');
    let nextKey = $selectedTab.data('key');
    if(currentKey != null && typeof currentKey != "undefined") {
        $('#flex_navi_btn_area').data('content-'+currentKey, $('#menuContent').clone());
    } // Save screen in use
    if(currentKey == nextKey) return; // New and existing screen is same
    $('#menuContent').empty();
    let $content = $('#flex_navi_btn_area').data('content-'+nextKey);
    if ($content != null && typeof $content != "undefined") {
        $content.replaceAll($('#menuContent'));     
        $content.data('key', nextKey);
    } // Change screen
    $('#flex_navi_btn_area .navButton').removeClass('on'); // For css
    $selectedTab.addClass('on'); // For css
}

JSP (content)

<div onclick="alert('html')"><div>
<div id="btn"></div>
<script>
  $('#btn').click( () => { alert('js'); });
</script> 

First load, working well
Second or more load, only ‘html’ alert working

I know that when there is the same html id, it is indistinguishable. So what I want is to isolate the screen that’s currently being shown so that it can’t be searched, and then bring up the screen that’s been isolated and show it on the screen.