jQuery if Loop Object Contains Text then Show/Hide Elements Per Loop Object

I am building a directory site. The search results page displays 10 posts per page, each is wrapped in it’s own Div and displays simple information such as a category icon, name, address and a "Call Now" link.

I am attempting to hide the "Call Now" link for any Div which contains the "Food" category icon.

Here is the HTML of the container and the first two divs

<div class="promoted-listings">
    <div class="grid-box-container">
        <div class="list_own_col_gt">
            <span class="cat-icon"><img class="icon icons8" src="https://www.example.com/wp-content/uploads/2021/11/food.png"></span>                                                    
            <p class="lp_list_call"><a href="tel:7777777777">Call Now</a></p>
             </div>
        <div class="list_own_col_gt">
            <span class="cat-icon"><img class="icon icons8" src="https://www.example.com/wp-content/uploads/2021/11/drinks.png"></span>                                                    
            <p class="lp_list_call"><a href="tel:9999999999">Call Now</a></p>
            </div>
    </div>
</div> 

jQuery

jQuery(document).ready(function( $ ){
    $('.list_own_col_gt img.icon.icons8').each(function(){
        if ($(this).attr('src').indexOf("food") != -1){
             $('.lp_list_call').addClass("hide");
    }
        else if ($(this).attr('src').indexOf("food") == -1){   
            return false;
}
});
});

This code hides the "Call Now" button on all loop items rather than just the div containing the "food" category icon. I have tried various methods of break and return false but cannot apply this function per loop item rather than the entire page.