var index = 0;
var markers = new Array(6);
var jsonArr = [{
  "acquaintanceName": "Jason Khal"
}, {
  "acquaintanceName": "Danny Targ"
}, {
  "acquaintanceName": "Ned Stark"
}, {
  "acquaintanceName": "Adam Cythe"
}, {
  "acquaintanceName": "John Snow"
}, {
  "acquaintanceName": "Alex Django"
}];

markers[21] = {};
markers[22] = {};
markers[34] = {};
markers[35] = {};
markers[36] = {};
markers[37] = {};

var d1 = document.getElementById('firstClub');
markers.forEach(function(marker) {
  counter = index + 1;
  d1.insertAdjacentHTML('beforeend', '<li><a href="#"><em>' + counter + '.</em>' + jsonArr[index].acquaintanceName + '</a></li>');
  index = index + 1;
});

const container = document.querySelector('.sub-menu');
let scrollbars = [];
document.querySelectorAll('.sub-menu').forEach(container => {
  scrollbars.push(new PerfectScrollbar(container));
});

const updateScrollbars = () => scrollbars.forEach(s => s.update());

const accordion_head = $('.accordion > li > a');
const accordion_body = $('.accordion li > .sub-menu');

// Open the first tab on load
accordion_head.first().addClass('active').next().slideDown('normal', updateScrollbars);

// Click function
accordion_head.on('click', function(event) {
  // Disable header links
  event.preventDefault();

  // Show and hide the tabs on click
  if ($(this).attr('class') != 'active') {
    accordion_body.slideUp('normal');
    $(this).next().stop(true, true).slideToggle('normal', updateScrollbars);
    accordion_head.removeClass('active');
    $(this).addClass('active');
  }
});