Как сохранить появившейся блок при click js

Предположим, что в первоначальном виде страницы у .jp-audio нет класса visib. Тогда, при готовности страницы добавим проверку на наличие нашего значения в хранилище текущей сессии sessionStorage (для случая перезагрузки страницы):

$(document).ready(function(){
  // Получение данных из sessionStorage
  var data = sessionStorage.getItem('visib');
  // если значение есть - тогда класс у элемента должен быть
  if (data) {
    $(".jp-audio").addClass("visib"); // добавим класс
  }
}

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

$(".fa-music").click(function(){
  // если класс был (значит далее он будет удален)
  if ($(".jp-audio").hasClass("visib")) {
    sessionStorage.removeItem('visib'); // удалим из хранилища
  } else {
    // если класса "visib" у ".jp-audio" не было
    sessionStorage.setItem('visib', true); // добавим в хранилище
  }
  $(".jp-audio").toggleClass("visib"); // добавим/удалим класс "visib"
});

Свойство sessionStorage позволяет получить доступ к объекту Storage текущей сессии. Данные в sessionStorage очищаются в момент окончания сессии текущий страницы. Сессия страницы остается активной все время пока окно браузера открыто и сохраняется между перезагрузками страниц. Открытие той же страницы в новом окне браузера или новой вкладке приводит к созданию новой сессии страницы.

Также, ссылки, которые будут полезны:

• Интерфейс Storage
• sessionStorage
• .ready()
• .hasClass()
• .addClass()
• .toggleClass()