Добавить флажок к выбранному изображению, когда пользователь нажимает на него

Question

Я использую ioni c 5 и должен отображать флажок для страны, когда пользователь нажимает флаг страны. Вот мой html код

<!-- <ion-header>
  <ion-toolbar>
    <ion-title>signup</ion-title>
  </ion-toolbar>
</ion-header> -->
<div class="ion-text-center customColor">
    <h3><b>Q-Majd</b></h3>
    <h5>The passion of all ages</h5>
</div>

<ion-content class='ion-margin'>
    <h2 class="ion-text-center ion-margin"><b>Signup / Login</b></h2>
    <ion-input type='tel' [(ngModel)]="countryCode" name='countryCode' pattern="\d*" placeholder='974' class='countryCodeInput'></ion-input>
    <ion-input type='tel' [(ngModel)]="phoneNumber" name='phoneNumber' placeholder='Type your number here' class='cellNumberInput'></ion-input>
    <h4 class="ion-text-center">Select your country</h4>
    <ion-grid class='ion-text-center'>
        <ion-row>
            <ion-col id='qatar' size='4' offset='1' (click)="onCountryClick('qatar')">
                <ion-img src="/assets/FlagQatar.png" alt="Qatar Flag" class='flag-img'></ion-img>
                <!-- Qatar -->
            </ion-col>
            <ion-col id='oman' size='4' style='margin-left: 40px;' (click)="onCountryClick('oman')">
                <ion-img src="/assets/FlagOman.jpg" alt="Oman Flag"></ion-img>
            </ion-col>
        </ion-row>
        <ion-row>
            <ion-col size='4' offset='1' (click)="onCountryClick('qatar')"> Qatar</ion-col>
            <ion-col size='4' style='margin-left: 40px;' (click)="onCountryClick('oman')">Oman</ion-col>
        </ion-row>
        <ion-row>
            <ion-col id='egypt' size='4' offset='1' (click)="onCountryClick('egypt')">
                <ion-img src="/assets/FlagEgypt.png" alt="Egypt Flag"></ion-img>
                <!-- Qatar -->
            </ion-col>
            <ion-col id='kuwait' size='4' style='margin-left: 40px;' (click)="onCountryClick('kuwait')">
                <ion-img src="/assets/FlagKuwait.png" alt="Kuwait Flag"></ion-img>
            </ion-col>
        </ion-row>
        <ion-row>
            <ion-col size='4' offset='1' (click)="onCountryClick('egypt')">Egypt</ion-col>
            <ion-col size='4' style='margin-left: 40px;' (click)="onCountryClick('kuwait')">Kuwait</ion-col>
        </ion-row>

        <ion-row>
            <ion-col size='4' offset='1'>
                <ion-img src="/assets/ComingSoon.png" alt="Coming Soon"></ion-img>
                <!-- Qatar -->
            </ion-col>
            <ion-col size='4' style='margin-left: 40px;'>
                <ion-img src="/assets/ComingSoon.png" alt="Coming Soon"></ion-img>
            </ion-col>
        </ion-row>
        <ion-row>
            <ion-col size='4' offset='1'>Coming Soon</ion-col>
            <ion-col size='4' style='margin-left: 40px;'>Coming Soon</ion-col>
        </ion-row>
        <ion-row style="margin-top: 10%;">
            <ion-col>
                <ion-button fill='outline' routerLink='/language-selection'>Back</ion-button>
            </ion-col>
            <ion-col>
                <ion-button fill='outline' (click)="onClickProceed()">Proceed</ion-button>
            </ion-col>
        </ion-row>

    </ion-grid>
    <!-- <ion-grid>
        <ion-row>
            <ion-col style="margin-left:10%;margin-right: 5%" size='5' size-sm='5'>
                <div>
                    <img src="/assets/FlagQatar.png" alt="Qatar Flag">
                    <p>Qatar</p>
                </div>
            </ion-col>

            <ion-col class='omanFlagBackground' style='' size='5' size-sm='5'>
                <p>Oman</p>
            </ion-col>

        </ion-row>
        <ion-row>
            <ion-col style="margin-left:10%" size='5' size-sm='5'>
                <p>Egypt</p>
            </ion-col>
            <ion-col size='5' size-sm='5'>
                <p>Kuwait</p>
            </ion-col>

        </ion-row>
    </ion-grid> -->
</ion-content>

и вот как я пытаюсь

onCountryClick(country: string) {
    // console.log(country);
    let htmlEl = document.getElementById(country);
    htmlEl.style.backgroundImage="url('/assets/checkMark.png')"
  }

, но, похоже, это не работает, потому что изображение checkMark идет на задний план. Я также попытался установить z-index, но это тоже не помогло. Заранее благодарим за помощь