onclick to change background add code, but only change it after a second click

I an image grid, when I click on an div containing image then the selected div should change the background. Now it does this only the second time, when inspecting the page source I can see that there is code added to change the background style=”background-color: rgb(xxx, xxx, xxx);”.

CSS

.library-grid-images{
    background-color: #c3c3c3;
}

Script

function display_image_info(id) {
    // reset all image boxes    
    $(".library-grid-images").css( "background-color", "#c3c3c3");
    //Selected box 
    var divid = "library-image-box-"+id;
    $("#"+divid).on( "click", function( event ) {
        $(event.delegateTarget ).css( "background-color", "#878787");
    });
    $('.library-images-info').load('/fam/library/library-image-info.php?id='+id);
    // image footer actions
    $("#image-actions-footer").css("visibility", "visible");
    $('#id-image-actions-footer').val(id);
};

HTML

 <div id="library-image-box-19923" class="library-grid-images" onclick="display_image_info(19923);">

When selected

<div id="library-image-box-19923" class="library-grid-images" onclick="display_image_info(19923);" style="background-color: rgb(135, 135, 135);">

When other selected

<div id="library-image-box-19923" class="library-grid-images" onclick="display_image_info(19923);" style="background-color: rgb(195, 195, 195);">

Answer

Change JS function

function display_image_info(id) {
    // reset all image boxes    
    $(".library-grid-images").css( "background-color", "#c3c3c3");
    //Selected box 
    var divid = "library-image-box-"+id;

    //Change Here
        $("#"+divid).css( "background-color", "#878787");
    //END Change
    
    $('.library-images-info').load('/fam/library/library-image-info.php?id='+id);
    // image footer actions
    $("#image-actions-footer").css("visibility", "visible");
    $('#id-image-actions-footer').val(id);
};

https://jsfiddle.net/lalji1051/uzb4r59s/