JSFiddle - React, Tailwind, and code Playground

HTML

<ol>
    <li id="amer"><span class="goey">AMERICA</span></li>
    <li id="euro"><span class="goey">EUROPA</span></li>
        <li id="asia"><span class="goey">ASIA</span></li>
    <li id="afri"><span class="goey">AFRICA</span></li>
</ol>
<div class="spaceMedium"></div>
<div class="class1">
   AMERICA
</div>
<div class="class2">
    EUROPA
</div>
<div class="class3">
    ASIA
</div>
<div class="class4">
    AFRICA
</div>
<div class="class5">
    OCEANIA
</div>

CSS

div.class0
{
  display : block;
    border-color: blue;
    border-style: solid;
    border-width: 2px;
}
div.class1,
div.class2,
div.class3,
div.class4,
div.class5
{
    display : none;
    border-color: red;
    border-style: solid;
    border-width: 1px;
}

div.spaceMedium
{
    margin-top: 20px
}

span.goey:hover
{
    background-color: yellow;
}

JavaScript

$(function()
{
    $("#amer").click(function()
    {
        $(".class1").removeClass().addClass("class");

    });

    $("#euro").click(function()
    {
        $(".class2").removeClass("class2").addClass("class");
    });
});