Rahmenfarbe von Optionen anhand Bestand ändern

Hallo zusammen,
ich versuche gerade die Rahmenfarbe bei den Optionen anhand des Bestand zu verändern.
Wenn also die Option nicht mehr lagernd ist, soll sie rot umrandet sein, wenn der Bestand gering ist orange und wenn genug da ist grün. Also habe ich mich durch das Netz geforstet und bin auf PHP, JAVA und CSS gestossen als mögliche Lösung. Ich habe folgende PHP Datei auf meinem Server geladen

PHP:

<?php
header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json");

// MySQL-Datenbankverbindung
$servername = "localhost";
$username = "XXX";  
$password = "XXX";  
$database = "XXX";

$conn = new mysqli($servername, $username, $password, $database);

// Verbindung prüfen
if ($conn->connect_error) {
    die(json_encode(["error" => "Datenbankverbindung fehlgeschlagen"]));
}

// Wert aus der Datenbank abrufen
$sql = "SELECT attributes_stock FROM product_attributes LIMIT 1";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
    $row = $result->fetch_assoc();
    echo json_encode(["value" => $row["wert"]]);
} else {
    echo json_encode(["value" => null]);
}

$conn->close();
?>


die ich auch ansprechen konnte und folgende Java Script Datei

Code:

import { useState, useEffect } from "react";

export default function DynamicButton() {
    const [value, setValue] = useState(null);

    useEffect(() => {
        fetch("http://localhost/XXX") 
            .then(response => response.json())
            .then(data => setValue(data.value))
            .catch(error => console.error("Fehler beim Abrufen der API:", error));
    }, []);

    const getBorderClass = () => {
        if (value === null) return "border-gray";
        if (value <= 0) return "border-red";
        if (value >= 1 && value <= 5) return "border-orange";
        return "border-green";
    };

    return (
        <a className={`modifier-group modifier-type__text modifiers-list li a ${getBorderClass()}`}>
            API Button ({value})
        </a>
    );
}

Diese habe ich unter Body Trackingcodes gespeichert - als letztes habe ich im eigenen CSS noch die Border Klassen definiert.
Nun das Problem: Nüscht passiert - hat da jemand einen Tipp für mich, ich denke mal dass das JavaScript da wahrscheinlich nicht hin gehört.

 

für die ursprünglichen Button:

Code:

.modifier-group.modifier-type__text .modifiers-list li a {
    display: inline-block;
    padding: 5px 10px;
    background: #ddd;
      box-shadow: 0 0 0 3px white;
    color: #666;
}
.modifier-group.modifier-type__text .modifiers-list li.active a {
    background: #eee;
    box-shadow: 0 0 0 3px #777;
    color: rgb(0 0 0 / 80%);
  border-radius: 2px;
   font-weight: bold;
}

.modifier-group.modifier-type__text .modifiers-list li a:hover {
    text-decoration: none;
    background: #eee;
    color: #000;
  box-shadow: 0 0 0 3px #777;
  border-radius: 2px;
}

und für die Veränderung:

Code:

.border-red {
    border: 3px solid red;
}

.border-orange {
    border: 3px solid orange;
}

.border-green {
    border: 3px solid green;
}

.border-gray {
    border: 3px solid gray;
}

Die Änderung auf Radio Button hat keine Veränderung gebracht.

 

Danke für die Ideen und Ansätze, aber in beiden Fällen passiert nichts.