JSFiddle - React, Tailwind, and code Playground

by Bahman ParsaManesh

HTML

<a href="#">Book-1</a> 
<a href="#">Book-3</a> 
<a href="#">Book-4</a> 
<a href="#">Book-5</a> 
<a href="#">Book-7</a>

JavaScript

function getBookIds(titleId) {
    return $.ajax('/echo/json/', {
        type: 'post',
        data: {
        json: JSON.stringify({ titleId: titleId }),
            delay: 0.5
        },
        dataType: "json"
    });
}

$('a').map(function() {
    var elem = $(this),
        click = $.Deferred();

    elem.on('click', function() {
        click.resolve(elem.text());
    });

    return click
    .done(function(id) {
        console.log("clicked "+id);
    })
    .then(getBookIds)
    .done(function(data) {
        console.log('Ajax call returned: ' + data.titleId);
    });
})