Като добавяш коментарите по този начин (.append нов ред за всеки елемент от цикъла) не ти ли генерира много на брой редове в таблицата? Доколкото разбирам условието, трябва да има един ред и в него да се вкарат всички коментари като <dil>-ове. В примерната картинка също се вижда само един блок с коментари, а не множество такива. Аз лично все още не мога да измисля как да стане това.

Аз го мислех по следния начин: когато потребителя кликне на някоя книга (по целия ред за тази книга) отдолу да "изкача" формата за коментари (input за автор, textarea за самия коментар и бутони за Submit и Cancel). После да апендва към тая книга един параграф със спан в края за името на автора (форматирано по начина от условието).
Обаче, когато създавам структурата на таблицата през JS не успявам да му вкарам Onclick функция и за сега съм до тук.

По време на генениране на списъкът с книги, данните за всяка една от тях (book._id, book.title и т.н.), които се съдържат в променливата book, се запазват като стрингосан обект в скрито input поле на формата за коментари.

var bookString = JSON.stringify(book);
var commentForm = $('<form class="formComment" style="display: none">')
    .append($("<input type='hidden' class='bookData' value='"+bookString+"' />"))
    .append($('</form>'));

При натискане на бутон "submit commet" стрингосаните данни от книгата се парват в JSON обект и се изпащат заедно с данните от коментара като аргументи на функцията addBookComment(bookJSON, commentText, commentAuthor).

let bookJSON = JSON.parse(bookData);

Понеже има малко разминаване откода в .doc файла и кода от видео лекцията на Наков е необходимо да се направи малка корекция на функцията addBookComment(). Този ред:

bookData.comments.push({text: commentText, author: commentAuthor});

 трябва да се приведе в следния вид:

bookData.comments.push({commentAuthor: commentAuthor, commentText: commentText});

Целият код на функцията за зареждане на книгите изглежда така: 

function showListBooksView() {
    showView('viewListBooks');
    $("#books").text('');
    let booksUrl = kinveyServiceUrl + "appdata/" + kinveyAppID + "/books";
    let authHeaders = {
        "Authorization": "Kinvey " + sessionStorage.authToken
    };
    $.ajax({
        method: "GET",
        url: booksUrl,
        headers: authHeaders,
        success: booksLoaded,
        error: showAjaxError,
    });
    function booksLoaded(books, status) {
        showInfo("Books loaded.");

        let booksTable = $("<table>").append($("<tr>")
                    .append($('<th>Title</th>'))
                    .append($('<th>Author</th>'))
                    .append($('<th>Description</th>'))
                );

        for (let book of books) {
            var bookTitle = book.title;
            booksTable.append($("<tr>")
                    .append($('<td></td>').text(book.title))
                    .append($('<td></td>').text(book.author))
                    .append($('<td></td>').text(book.description))
            );

            var bookString = JSON.stringify(book);

            var commentForm = $('<form class="formComment" style="display: none">')
                    .append($('<label for="commentAuthor">Your Name: </label>'))
                    .append($('<input type="text" id="commentAuthor"/>'))
                    .append($('<label for="commentText">Your comment: </label>'))
                    .append($('<input type="text" id="commentText"/>'))
                    .append($("<input type='hidden' class='bookData' value='"+bookString+"' />"))
                    .append($('<button class="addComment" type="button" onclick="addComment()" >Add Comment</button>'))
                    .append($('<input id="Cancel" type="button" value="Cancel" onclick="cancelComment()"/>'))
                    .append($('</form>'));
            var comWrap = $('<div class="comment-wrap"></div>');

            if (book.comments != null){
                for (var i=0; i < book.comments.length; i++){
                    var comment = book.comments[i];
                    let comText = $('<div></div>').text('"' + comment.commentText + '"');
                    let comAuth = $('<div><i>-- ' + comment.commentAuthor + ' --</i></div>');

                    comWrap.append(comText, comAuth);
                }
            }

            comWrap.append($('<a href="#formComment" class="more" onclick="showFormComments()">Add Comment</a>'));
            comWrap.append(commentForm);
            booksTable.append($("<tr>")
                .append($('<td colspan="3"></td>').append(comWrap))
            );
        }
        $("#books").append(booksTable);//video time point: 2:12:22

    }
}

function showFormComments() {
    let a = document.activeElement; // in this case it is the <a> element
    a.style.display = 'none';
    a.nextElementSibling.style.display = 'inline-block'; // nextElementSibling is the hidden form
}

function addComment() {
    let buttonFormSubmit = document.activeElement;
    let parent = buttonFormSubmit.parentNode; //stores the parent node of the active element
    /*
     var buttonIndex = Array.prototype.indexOf.call(parent.children, buttonFormSubmit);
     checks the index of the active element
     which in our case was [5] for the formComment submit button
     */
    let nodes = parent.childNodes; // creates an array of all the child nodes
    let commentAuthor = nodes[1].value;
    let commentText = nodes[3].value;
    let bookData = nodes[4].value;
    let bookJSON = JSON.parse(bookData); //converts the bookData from string format to JSON
    addBookComment(bookJSON, commentText, commentAuthor);
}

function cancelComment() {
    let buttonFormCancel = document.activeElement;
    let parent = buttonFormCancel.parentNode;
    parent.style.display = 'none';
    parent.previousElementSibling.style.display = 'inline-block';
}

function addBookComment (bookData, commentText, commentAuthor) {
    let booksUrl = kinveyServiceUrl + "appdata/" + kinveyAppID + "/books";
    let authHeaders = {
        "Authorization": "Kinvey " + sessionStorage.authToken,
        "Content-type": "application/Json"
    };
    if (!bookData.comments) {
        bookData.comments = [];
    }
    bookData.comments.push({commentAuthor: commentAuthor, commentText: commentText});
    $.ajax({
        method: "PUT",
        url: booksUrl + "/" + bookData._id,
        headers: authHeaders,
        data: JSON.stringify(bookData),
        success: addBookCommentSuccess,
        error: showAjaxError
    });
    function addBookCommentSuccess(data, status) {
        showListBooksView();
        showInfo('Book comment added.')
    }
}

Здравейте!
Първо, трябва да получите данните на книгата, за която искате да добавите коментар. Тези данни може да са налични в bookData, който се подава като параметър на функцията.
След това можете да създадете обект за коментар с полетата commentText и commentAuthor, които също се подават като параметри на функцията. pge outage map