JSFiddle - React, Tailwind, and code Playground

by zaza zviaduari

HTML

<div id="for"></div>
<div id="results"></div>

CSS

.favorite {
  border:1px solid red;
  color:yellow
}

JavaScript

var favorites ='[{"albumId": 1,"id": 6,"title": "accusamus ea aliquid et amet sequi nemo","url": "http://placehold.it/600/56a8c2","thumbnailUrl": "http://placehold.it/150/56a8c2"},{"albumId": 1,"id": 8,"title": "aut porro officiis laborum odit ea laudantium corporis","url":"http://placehold.it/600/61a65","thumbnailUrl":"http://placehold.it/150/54176f"}]';
 
$.getJSON('https://jsonplaceholder.typicode.com/albums/1/photos', {}, function(data) {
  $.each(data, function(i, value) {
    $('#results').append("<div class='item'>"+value.id+" - "+value.title+" <a data-id='"+i+"' href='#' class='add'>&#x2605;</a></div>");

if(favorites.includes(value.url)) {
$('a[data-id = '+i+']').addClass('favorite');
}
  });
});