Tabs component does not respect heading levels

Design help Custom code
1

I’m using tabs to organize content. Each tab link has an h3 and the items in each corresponding tab pane are h4s. However, the rendered DOM shows all h4s under just one tab.

ahrefs screenshot shows this:

H1 MS3C-16
H2 Details
H3 More like this
H3 Resources
H4 MS3C-16
H4 MS3C-13
H4 MS3C-10
H4 MS3C-7
H4 MS3C-5
H4 Auto Tapper
H4 How to Turn a Single Drill Press Into a Gang Drill
H4 Wide Multiple Spindle Head with Rod Guides For Additional Stabilization
H4 Vertical Mill (i.e. Bridgeport Mill and clones) Applications
H4 Tap Two Holes at Once with Self-Reversing Feature
H4 Spindle Adjustment
H4 Multiple Spindle Tapping Heads for Different Pitch Taps
H4 Multiple Spindle Drilling Head for Different Size Drills
H4 How to Power a MultiDrill (Cluster Drill) Head

When it needs to show this:

H1 MS3C-16
H2 Details
H3 More like this
H4 MS3C-16
H4 MS3C-13
H4 MS3C-10
H4 MS3C-7
H4 MS3C-5
H3 Resources
H4 Auto Tapper
H4 How to Turn a Single Drill Press Into a Gang Drill
H4 Wide Multiple Spindle Head with Rod Guides For Additional Stabilization
H4 Vertical Mill (i.e. Bridgeport Mill and clones) Applications
H4 Tap Two Holes at Once with Self-Reversing Feature
H4 Spindle Adjustment
H4 Multiple Spindle Tapping Heads for Different Pitch Taps
H4 Multiple Spindle Drilling Head for Different Size Drills
H4 How to Power a MultiDrill (Cluster Drill) Head

I’m currently using js to modify the DOM but it’s not working. Any suggestions?

<script>
document.addEventListener("DOMContentLoaded", function() {
    // Function to move an element before a target element
    function moveElementBefore(element, target) {
        target.parentNode.insertBefore(element, target);
    }

    // Select the H3 headings by ID
    const tab1Heading = document.getElementById('tab1-heading'); // ID of the "More like this" heading
    const tab2Heading = document.getElementById('tab2-heading'); // ID of the "Resources" heading

    // Select the containers that hold the H4 headings
    const tab1Pane = tab1Heading.nextElementSibling;
    const tab2Pane = tab2Heading.nextElementSibling;

    // Move the H3 heading for "More like this" before the first H4 in its container
    const tab1Item = tab1Pane.querySelector('h4[data-move="related"]');
    if (tab1Item) {
        moveElementBefore(tab1Heading, tab1Item);
    }

    // Move the H3 heading for "Resources" before the first H4 in its container
    const tab2Item = tab2Pane.querySelector('h4[data-move="resources"]');
    if (tab2Item) {
        moveElementBefore(tab2Heading, tab2Item);
    }
});
</script>
2

Tabs aren’t generally used for semantic structure.
If you look at the HTML, the tabs are together, and the content panes are together.

What you probably want is to put your H3’s inside of the tab content pane above your H4’s, so that the positioning is preserved.

If you do not want to show a visible title there, you can hide it- I’d use screen-reader a11y methods for hiding it rather than display: none, something like this on your H3’s;

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}