AMP buttons by location

Question

I'm working on a project (AMP website) where I have buttons that should only show up at certain locations and be hidden at other locations. However, I'm struggling to make each of the selected locations have different links. Even GPT-4 couldn't solve this issue for me. Here is the code I'm currently using:

First, here is my CSS and HTML setup:

<center>
<div id="custom-country-button-container-2">
    <a href="https://1" class="bonus-button geo-button">play</a>
</div></center>
<?php if ( function_exists( 'is_amp_endpoint' ) && is_amp_endpoint() ) : ?>
<style amp-custom>
    .geo-button {
        display: none; 
        margin: 10px 0;
    }
    body.amp-geo-group-KZ .geo-button,
    body.amp-geo-group-AZ .geo-button,
    body.amp-geo-group-RU .geo-button {
        display: block; 
width:100% !important;;
text-align:center !important;;
    }
</style>

<amp-geo layout="nodisplay">
    <script type="application/json">
        {
            "ISOCountryGroups": {
                "KZ": ["KZ"],
                "AZ": ["AZ"],
                "RU": ["RU"],
                "default": ["default"]
            }
        }
    </script>
</amp-geo>
<?php endif; ?>
</div>

I've tried to implement the button functionality with AMP, but I encounter issues where the buttons disappear and don't show correctly. Here's the script and additional AMP configuration I'm using:

The problem is that when the buttons are supposed to show up for different countries, they sometimes don't show up correctly (all of them) or not at all. Can anyone help me figure out what I'm doing wrong? Any recommendations on how to properly show different buttons for different locations with the correct links would be greatly appreciated!