JSFiddle - React, Tailwind, and code Playground

JavaScript

$.ajax({
    url: "https://your/json/source",
    type: "GET",
    dataType: "json",
    success: function (data) {
        var booksHTML = "";
        // The loop
        for (var i = 0; i < data.books.length; i++) {
            // Make sure the book exists in json
            if (typeof data.books[i] !== "undefined") {
                // Get vars for book data such as url, img src and title
                var url = data.books[i].url,
                    image = data.books[i].img.src,
                    title = data.books[i].title;
                // Generate relevant HTML for a single book
                booksHTML += '<div class="col-xs-4 col-md-2">';
                booksHTML += '<a href="' + url + '" title="' + title + '" target="_blank"><img src="' + image + '" alt="' + title + '" class="img-responsive book"/></a>';
                booksHTML += '</div>';
                
                // If, in the loop, this is the third book or something that is a multitude of 3
                // but not a multitude of 6, we add the hidden shelf
                // ELSE if, in the loop, it's the sixth book or a multitude of 6
                // we add a shelf, without the hidden class. This could be written a little shorter, but this
                // is the clearest.
                if (((i + 1) % 3 === 0) && ((i + 1) % 6 !== 0)) {
                    booksHTML += '<div class="col-xs-12 shelf hidden-md hidden-lg"></div>';
                } else if (((i + 1) % 6 === 0)) {
                    booksHTML += '<div class="col-xs-12 shelf"></div>';
                }
            }
        }
        // END the loop
        
        // Append generated HTML to a container
        $(".container .row").append(booksHTML);
    }
});