Нужно
На сервере описать путь. Клиент будет ходить через ajax в него за данными. Данные потом отобразит в DOM. Можно отвечать с сервера чисто данными в JSON формате, можно строкой сгенерированного HTML которую сразу вставишь в DOM через innerHTML, смотри по своей ситуации.
Пусть путь будет /get-books-details/. Параметр будет book-id. Сервер будет генерировать ответ за запрос по этому пути. Не забудь убедиться что заголовок ответа соответствует типу данных.
Клиент делает запрос по пути, передаст айдишник книги, получает ответ, рендерит его. Айдишник клиенту можно подсказать через data-attribute в html разметке кнопки. Это общепринятый способ связывать данные с DOM узлами.
<button class="js-show-more" data-book-id="123">Открыть</button>
И собственно код запроса с клиента
$('.js-show-more').on('click', function (event) {
//ссылка на узел на который кликнули
var clickTarget = event.target
var bookId = clickTarget.dataset.bookId // обрати внимание что data-book-id становится bookId, а значение будет строкой
// Запрос. Ожидается что в ответе будут данные
$.ajax({
url: '/get-books-details/',
data: {
'book-id': bookId
}
}).then(function (response) {
// отображение данных
})
})
Это базовый пример и в нем куча потенциальных нюансов. Например пользователь кликнет на кнопку второй раз до того как придет ответ от первого клика, что делать. Или на сервере будет ошибка при генерировании ответа, как отреагирует клиент. Как именно будет происходить рендер зависит от формата ответа.
Отставляя техническую часть, я не вижу в чем ценность кнопки. С точки зрения удобства пользования данные лучше показать сразу.
