I have been working on turn.js but didn't find any example regarding loading dynamic pages with content via ajax, the page is loading, but not with all result json result from controller

<div class="sample-flipbook" id="BookViewer">
            <div id="book-js" class="text-center">
                <div class="hard">
                    <img src="~/Theme/OtherAssets/Images/temp-img.jpg" class="img-fluid" style="width:100%; height:100%">
                </div>
                <div class="hard"></div>
                <div id="Page-Loader"></div>
                <div class="hard"></div>
            </div>
        </div>


<script type="text/javascript">
    $(document).ready(() => {
        $('#book-js').turn({
            width: 900,
            height: 600,
            autoCenter: true
        });
    });
    function LoadBook(HBID, ChapterNo, TableRef) {
        $.ajax({
            url: '@Url.Action("GetData", "Books")',
            type: "GET",
            data: { HadithBookID: HBID, ChapterNo: ChapterNo, TableRefNo: TableRef },
            success: (response) => {

                console.log(response.length);
                for (var i = 0; i < response.length; i++) {
                    var Html = "<div>";
                    Html += '<p class="urdu-font-fm container-fluid mt-3">' + response[i].ArabicText+'</p>';
                    Html += '<p class="container-fluid">' + (response[i].EnglishText != null ? response[i].EnglishText == null : "") + '</p>';
                    Html += '<p class="urdu-font-fm container-fluid">' + response[i].UrduText+'</p>';
                    Html += '<p class="urdu-font-fm container-fluid">' + (response[i].Language1  != null ? response[i].Language1  == null : "") + '</p>';
                    Html += "</div>";

                    $('#Page-Loader').html(Html);
                }
            },
            error: (response) => { console.log(response); }
        });
    }
</script>