Probleme code css elementor

Bonjour, je me permet de poster ce message car je suis actuellement en train de créer mon site FAN pour un jeu. J'utilise une api externe public pour afficher des badges depuis le jeu ( extension utiliser : WpGetApi )
J'ai récemment payer un codeur sur la plateforme ComeUp pour m'ecrire un script pour modifier le design de l'affichage des badges en utilisant un Tooltip ( voir sur le site quand on survol le contenair "Derniers Badges FR"). Ne voulant pas repayer, je me suis dis que j'allais le refaire pour l'affichage des derniers meuble du jeu de la meme facon mais, probleme, cela m'affiche un code erreur. Voici les 2 code en question, le premier qui marche et le 2eme qui ne marche pas.
 

<br>
<br>
<br>
<?php
$data = wpgetapi_endpoint( 'badges', 'badges', array('debug' => false) );

echo '<div class="BadgesFR">';
foreach ($data['result'] as $result) {
    echo '
        <div class="Badge">
            <p class="BadgeFR_tooltip tooltip_' . $result['guid'] . '">' . $result['name'] . '</p>
            <img class="BadgeFR BadgeFR_ID_' . $result['guid'] . '" src="' . $result['image'] . '">
        </div>
    ';
}
echo '</div>';
?>
<br>
<style>
    .elementor-226 .elementor-element.elementor-element-534ba53 {
        z-index: unset !important;
    }
    
    .Badge {
        position: relative;
        display: inline-block;
        width: 50px;
        height: 50px;
        border-radius: 5px;
        z-index: 2 !important;
    }
    
    .Badge img {
        width: 40px;
        height: 40px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    
    .Badge.hover {
        cursor: pointer;
        background: #333;
    }
        
    .BadgeFR_tooltip {
        display: none;
        position: absolute;
        top: -90%;
        left: 50%;
        transform: translateX(-50%);
        text-align: center;
        background: #333;
        color: white;
        border-radius: 5px;
        white-space: nowrap;
        padding: 5px 10px;
        z-index: 2 !important;
    }
    
    .BadgeFR_tooltip::before {
        content: "";
        width: 0;
        height: 0;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-top: 10px solid #333;
        position: absolute;
        bottom: -9px;
        left: 50%;
        transform: translateX(-50%);
    }
</style>
<script>
    const badgesFR = document.querySelectorAll(".BadgeFR");
    const tooltips = document.querySelectorAll(".BadgeFR_tooltip");
    
    badgesFR.forEach((badge) => {
        badge.addEventListener("mouseover", () => {
            let id = badge.classList[1].replace("BadgeFR_ID_", "");
            
            tooltips.forEach((tooltip) => {                
                if(tooltip.classList.contains("tooltip_" + id)) {
                    badge.closest(".Badge").classList.add("hover");
                    tooltip.style.display = "inline-block";
                }
            });
        });
        
        badge.addEventListener("mouseout", () => {
            badge.closest(".Badge").classList.remove("hover");
            tooltips.forEach((tooltip) => {                
                tooltip.style.display = "none";
            });
        })
    })
</script>

<br>
<br>
<br>
<?php
wpgetapi_endpoint( 'furni', 'furni', array('debug' => false) );

echo '<div class="furni">';
foreach ($data['result']['furni'] as $result) {
    echo '
        <div class="furni">
            <p class="furni_tooltip tooltip_' . $result['guid'] . '">' . $result['name'] . '</p>
            <img class="furni Furni_ID_' . $result['guid'] . '" src="' . $result['icon'] . '">
        </div>
    ';
}
echo '</div>';
?>
<br>
<style>
    .elementor-226 .elementor-element.elementor-element-f75c634 {
        z-index: unset !important;
    }
    
    .furni {
        position: relative;
        display: inline-block;
        width: 50px;
        height: 50px;
        border-radius: 5px;
        z-index: 2 !important;
    }
    
    .furni img {
        width: 40px;
        height: 40px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    
    .furni.hover {
        cursor: pointer;
        background: #333;
    }
        
    .furni_tooltip {
        display: none;
        position: absolute;
        top: -90%;
        left: 50%;
        transform: translateX(-50%);
        text-align: center;
        background: #333;
        color: white;
        border-radius: 5px;
        white-space: nowrap;
        padding: 5px 10px;
        z-index: 2 !important;
    }
    
    .furni_tooltip::before {
        content: "";
        width: 0;
        height: 0;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-top: 10px solid #333;
        position: absolute;
        bottom: -9px;
        left: 50%;
        transform: translateX(-50%);
    }
</style>
<script>
    const furni = document.querySelectorAll(".furni");
    const tooltips = document.querySelectorAll(".furni_tooltip");
    
    furni.forEach((furni) => {
        furni.addEventListener("mouseover", () => {
            let id = furni.classList[1].replace("furni_ID_", "");
            
            tooltips.forEach((tooltip) => {                
                if(tooltip.classList.contains("tooltip_" + id)) {
                    furni.closest(".furni").classList.add("hover");
                    tooltip.style.display = "inline-block";
                }
            });
        });
        
        furni.addEventListener("mouseout", () => {
            furni.closest(".furni").classList.remove("hover");
            tooltips.forEach((tooltip) => {                
                tooltip.style.display = "none";
            });
        })
    })
</script>

J'utilise l'extension CodeSnippet pour intégrer du code dans l'editeur elementor.

Voici le code erreur afficher : 
Warning: Undefined variable $data in /htdocs/wp-content/plugins/code-snippets/php/front-end/class-frontend.php(210) : eval()'d code on line 10

Warning: Trying to access array offset on value of type null in /htdocs/wp-content/plugins/code-snippets/php/front-end/class-frontend.php(210) : eval()'d code on line 10

Warning: Trying to access array offset on value of type null in /htdocs/wp-content/plugins/code-snippets/php/front-end/class-frontend.php(210) : eval()'d code on line 10

Warning: foreach() argument must be of type array|object, null given in /htdocs/wp-content/plugins/code-snippets/php/front-end/class-frontend.php(210) : eval()'d code on line 10

J'ai bien remplacer l'appel foreach avec la template API generer par mon extension WpGetApi ainsi que tous les champs Badge - Badge FR ... par Furni et le code elementor en allant dans inspecter css dans mon navigateur.

Quelqu'un pourait-il m'aider svp ?

En espèrant de l'aide, Cordialement.

EDIT : Correction des balises de code