Issues with displaying tables in a report when clicking on sidebar buttons

I am working on creating a report with a sidebar that is intended to display a specific table when a button in the sidebar is clicked. However, the current implementation is causing an accumulation of tables, where each click on a sidebar button results in a new table being displayed below the previous ones. The desired behavior is to have only one table displayed at a time, corresponding to the button clicked. The issue seems to be related to how the tables are being handled upon button clicks, and I’m looking for guidance on how to ensure that only one table is displayed for each button click.

   <script>
        function showContent(fileName) {
            // hide
            var reportContents = document.querySelectorAll('.report-content');
            reportContents.forEach(function(content) {
                content.classList.add('visible');
            });
            //show
            var selectedContent = document.getElementById('content_' + fileName.replace('.', '_'));
            if (selectedContent) {
                selectedContent.classList.remove('hidden');
            }
        }
    </script>         

This is the code that I have been using so far.