JSFiddle - React, Tailwind, and code Playground

by Lalji Tadhani

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<div id="library-image-box-19923" class="library-grid-images" onclick="display_image_info(19923);">123</div>

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

CSS

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

JavaScript

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).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);
};