Александр Панкратов

Вам нужно парсить в многомерный массив:

array = [ 
      {
        'header':'header1',
        'contents':'contents1'
      },
      {
        'header':'header2',
        'contents':'contents2'
      },
    ....
];

А обращаться в html к переменным вот так: {{item.header}} и {{item. contents}}

Парсить можно через регулярные выражения: https://javascript.ru/string/match

Если нужно скрывать всплывающее окно, по клику на фон, то обычно вешают обработчик клика на элемент фона.

$(".userbar").removeClass("userbar_show") - будет работать независимо от того где вызывается этот код и на всех элементах c классом "userbar". И более правильным подходом я считаю использование функций и привязка их через onclick в html коде.

Тоесть будет такой код:

function userbar_show(){
        $("body").toggleClass("body__scroll-hidden");  /* на боди вешается стиль который запрещает скролл */
        $(".userbar").toggleClass("userbar_show");
}

function userbar_hide(){
        $("body").removeClass("body__scroll-hidden");
        $(".userbar").removeClass("userbar_show");
}

<div class="wrapper">
 <div class="hower_backgroud" onclick="userbar_hide();"></div>
 <div class="userbar" onclick="userbar_hide();">
      <div class="js-userbar-toggler" onclick="userbar_show();"></div>
      <div class="js-userbar-close" onclick="userbar_hide();"></div>
 </div>
</div>