При обновление страницы весь `.append()` исчезает

Раз уж вы заюзали jQuery, то кода будет поменьше. Я соглашусь с комментарием про localStorage или БД, однако ответа я не увидел, поэтому покажу идею с localStorage, на мой взгляд этот подход более простой. Дополним метод клика:

$('#button').on('click', function(){
    const element = '<p>test</p>'; // положили в переменную наш элемент
    $('body').append(element); // дабавили к body наш элемент
    const items = localStorage.getItem('appended'); // получили по ключу свой элемент
    var elements = JSON.parse(items) || []; // распарсили полученный элемент
    elements.push(element); // добавили в массив
    localStorage.setItem('appended', JSON.stringify(elements)); // записали новое значение
});

А также добавим блок кода, который будет добавлять элементы после того, как страница обновилась:

$(document).ready(function() {
    const items = localStorage.getItem('appended'); // получили по ключу свой элемент
    var elements = JSON.parse(items) || []; // распарсили полученный элемент
    // пройдем по элементам и добавим их к body
    for (var index = 0; index < elements.length; index++) {
       $('body').append(elements[index]); // дабавили к body наш элемент
    }
});

Полезные ссылки:

• Window.localStorage
• Storage.setItem()
• Storage.getItem()
• Storage.removeItem()
• JSON.stringify()
• JSON.parse()

Использовать куки

Статические решение: Изначально скрывать данный блок до поры до времени, а потом по клику показывать? В куки клиенту прописывать, что данный блок уже видимый и при повторном показе показывать сразу.

Динамическое решение: В том виде как это сделано у вас куки можно использовать для того чтобы сохранить какие блоки показаны, а какие скрыты и при обновлении страницы, прочитав куки, динамически добавлять/удалять соответствующие блоки.