JSFiddle - React, Tailwind, and code Playground

by Long Nguyễn Hoàng

HTML

<p>Will refresh content in 5 seconds</p>
 <div id="books">test test test </div>

JavaScript

$(document).ready(function () {
        refresh_Div();
    });

    var i = 1;
    function refresh_Div() {
        $('#books').empty();

        $.ajax({
            type: 'GET',
            url: 'library.xml',
            dataType: 'xml',
            success: function (xml) {

                $(xml).find('List').each(function () {

                    if ($(this).find('code').text() == i) {
                        $('#books').append(
                        '<div>' +
                            '<div><b>Name of Book: </b>' +
                                $(this).find('BookName').text() + '</div> ' +
                            '<div><b>Category: </b>' +
                                $(this).find('Category').text() + '</div> ' +
                            '<div><b>Price: </b>' +
                                $(this).find('Price').text() + '</div> ' +
                        '</div>')
                        .hide().fadeIn(2000);
                    }
                });

                i = i + 1;
                if (i >= 3) i = 1;
            }
        });
    }

    var reloadXML = setInterval(refresh_Div, 5000);

</html>