I have following code

  if (K.API.Core.runWhenElementPresent('.has-flag', function () {
        var KamTestTemplate= '<div id="KamNotice"<span>text</span></div>';
        document.querySelector('#product-transaction-area').insertAdjacentHTML('afterbegin', KamNoticeTemplate)
    }));
    
    else if (K.API.Core.runWhenElementPresent('.product-media', function () {
        var KamTestTemplate= '<div id="KamNotice"<span>text</span></div>';
        document.querySelector('.product-media').insertAdjacentHTML('afterbegin', KamNoticeTemplate)
}));
    

I want that if the first div has-flag, the content should be shown in the transaction-area, and if the div has product-media, it should be shown within the product-media content box, but something is wrong with my code i get the content in both boxes, not in one.