How do I get text appear on the right side of the map when I click on a country using Javascript events?

This is the task:

Create a web page showing the map of Scandinavia on the left and a blank element on the right. Here it is a good idea to use the map as a background image in an element.
Add round – elements (Hint: border-radius) with each of the four flags and place them over the country to which they belong (Hint: position).
Add an effect when you hover the mouse pointer over a flag.
For example, you can change the arrow to a hand, and you can do something with the elements that make it clear that you are holding them over.
Add a click event to each of the flags. When a flag is clicked, a text about the country should appear in the element on the right. The text must contain information about the country, and must at least contain area, population, currency and capital.

All I have left is to get the text about the the clicked country to appear on the right side of the map.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *,*::before,*::after{
            box-sizing: border-box;
        }
        .container{
            display: flex;
        }
        
        .container>div:first-child{
            position: relative;
            height: 500px;
            width:500px;
            padding:1rem;
            background-color: #eee;
            background-image:url(./Oppgave2/Skandinavia.png);
            background-position: center;
            background-size:contain;
            background-repeat:no-repeat;
        }
        .container>div:first-child .flag{
            width: 32px;
            height: 32px;
            position:absolute;
            border-radius: 50%;
            background-color: #fff;
            padding:0.1rem;
        }
        .container>div:first-child img{
            width: 28px;
            height: 28px;
            border-radius: 50%;
            
        }

        .container>div:first-child img:hover{
            cursor:pointer;
            transform:scale(1.2);
        }
        .norway{
            top: 300px;
            left: 126px;
        } 

        .finland{
            top:234px;
            left: 350px;
        }

        .sweden{
            top:282px;
            left: 203px;
        }

        .denmark{
            top:447px;
            left: 120px;
        }
    </style>
</head>

<body>
    <div class="container">
        <div>
            <div class="flag norway" >
                <img src="./Oppgave2/Norge.png" alt="Norway">
            </div>
            <div class="flag denmark">
                 <img src="./Oppgave2/Danmark.png" alt="Denmark">
            </div>
           
            <div class="flag sweden"> 
                <img src="./Oppgave2/Sverige.png"  alt="Sweden">
            </div>

           <div class="flag finland">
               <img src="./Oppgave2/Finland.png" alt="Finland">
           </div>
            
        </div>
        <div>

        </div>
    </div>
    <script>
    </script>
</body>

</html>

All I have left is to get the text about the country I want to click to appear on the right side of the map when I click the country. So if I want to click on Norway, it should appear a text containing information about Norway on the right side of the map. The same goes for Sweden, Denmark and Finland’s flags.