JSFiddle - React, Tailwind, and code Playground

by tunafish

HTML

<div class="demo">
    
<div id="album">
    <p>Photo Album</p>
    <ul class="gallery">
        <li><img src="http://immoshots.com/albums/002171/tn/001.jpg" /></li>
        <li><img src="http://immoshots.com/albums/002171/tn/002.jpg" /></li>
        <li><img src="http://immoshots.com/albums/002171/tn/003.jpg" /></li>
        <li><img src="http://immoshots.com/albums/002171/tn/004.jpg" /></li>
        <li><img src="http://immoshots.com/albums/002171/tn/005.jpg" /></li>
    </ul>
</div>
    
<div id="favorites">
    <p>Favorites</p>    
    <ul class="gallery">
        <li><img src="http://immoshots.com/albums/002171/tn/001.jpg" /></li>
        <li><img src="http://immoshots.com/albums/002171/tn/002.jpg" /></li>
        <li><img src="http://immoshots.com/albums/002171/tn/010.jpg" /></li>
    </ul>
</div>

</div><!-- End demo -->

CSS

#album, #favorites { float:left; width: 420px; padding: 10px; background: silver; }    
    #favorites { margin-top: 10px; }

    .gallery li { float: left; width: 120px; height: 80px; margin: 5px; padding: 5px; background: #404040; }

JavaScript

$("#album li img").click(function() {
    var url = $(this).attr('src');
    alert(isFavorite(url));
})
    
function isFavorite(url) {
    return $("#favorites li img[src]:contains(" + url + ")").length > 0;
}