JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head></head>
<body>
    
    <input type="hidden" id="HiddenMediaID" value="450">
    
    <article class="Article">
        Article 1                
        <input type="hidden" class="LatestMediaID" value="200" />
    </article>
    
    <article class="Article">
        Article 2
        <input type="hidden" class="LatestMediaID" value="450" />
    </article>
    
    <article class="Article">
        Article 3
        <input type="hidden" class="LatestMediaID" value="700" />
    </article>
    
</body>
</html>

CSS

.Article {
    width: 150px;
    height: 35px;
    line-height: 35px;
    margin: 10px;
    background-color: #FFFFFF;
    border: 1px solid #CCCCCC;
    text-align: center;    
}

JavaScript

//Page loaded - jQuery Ready
$(document).ready(function () {
    
    //User hovering over article. Change BG.
    $(document).on('mouseenter', '.Article', function () {
        if( !( $(this).hasClass('donotSelect') ) )
            $(this).css('background', '#F0F8FF');
    }).on('mouseleave', '.Article', function () {
        if( !( $(this).hasClass('donotSelect') ) )
            $(this).css('background', '#FFFFFF');
    });

    //Set active BG color if condition is met.
    $('.LatestMediaID').each(function () {
        var LatestMediaID = $(this).val();     
     
        //Disable mouseenter and mouseleave events on the matched Article.
        if (LatestMediaID == $('#HiddenMediaID').val()) {
            
           alert($(this).attr('class'));
            $(this).parent().addClass("donotSelect");
               
            
            //Disable events.
            $(document).off('mouseenter', $(this).parent());
            $(document).off('mouseleave', $(this).parent());
           
            //Change BG color to light blue.    
            $(this).parent().css('background', '#F0F8FF');
        }
    });
    
});