JSFiddle - React, Tailwind, and code Playground

HTML

<div class="countryspots">
    <div style="position:relative;left:60px;" class="america brazil"><a href="#"><span>Brazil</span></a></div>
    <div style="position:relative;top:60px;" class="america argentina"><a href="#"><span>Argentina</span></a></div>
    <div style="position:relative;left:200px;" class="europe ireland"><a href="#"><span>Ireland</span></a></div>
    <div style="position:relative;left:200px;" class="europe portugal"><a href="#"><span>Portugal</span></a></div>
</div>

CSS

.countryspots div {
    position: absolute;
    width: 50px;
    height: 50px;
    background-color: blue;
    color: white;
    border: 1px solid red;
}

.countryspots div a {
    color:#FFF;
    text-decoration:none;
}

JavaScript

function addEventHandlers(){

    $(".countryspots div").each(function() {
        $(this).data("originalContent", $(this).children("a").html());
    }).hover(function() {

        var thisClass = $(this).attr("class");
        var thisCountry = thisClass.split(" ");
        var thisNumber = getNumber(thisCountry[1]);

        $(this).children("a").html("<span>" + thisNumber + "</span>");
    }, function() {
        $(this).children("a").html($(this).data("originalContent"));
    });

}

function getNumber(country){

    var x = "?";

    switch (country) {
        case "brazil"        : return 435; //
        case "argentina"    : return 100; //
        case "ireland"        : return 5; //
        case "portugal"        : return 550; //

    }
    
}

$(function() {
    addEventHandlers();
});