Сергей delphinpro

* {
  outline : 1px solid red !important;
}

const duplicateArray = ['a', 'b', 'c', 'a', 'b', 'c', 'q'];
console.log(
    Array.from(new Set(duplicateArray))
);

const duplicateArray = ['a', 'b', 'c', 'a', 'b', 'c', 'q'];
console.log(
    duplicateArray.reduce(function (carry, item) {
        if (!carry.includes(item)) carry.push(item);
        return carry;
    }, [])
);

const duplicateArray = ['a', 'b', 'c', 'a', 'b', 'c', 'q'];
console.log(
    [...duplicateArray.reduce((carry, item) => [...carry].includes(item) ? carry : carry + item, '')]
);

<button class="open" data-target="b1">Open1</button>
<button class="open" data-target="b2">Open2</button>
<div class="hidden-block" id="b1">
  <ul>
    <li>Первый</li>
  </ul>
  <button class="close">Close</button>
</div>
<div class="hidden-block" id="b2">
  <ul>
    <li>Второй</li>
  </ul>
  <button class="close">Close</button>
</div>

// 1. Константа, значение не меняется
// 2. Это кнопка, а не блок (название фиговое)
// 3. Их может быть несколько на странице
const openButtons = document.querySelectorAll('.open');

// Закрывашка находится внутри блока, поэтому искать ее нужно именно внутри блока
// чтобы она закрывала только свой блок. Это выкидываем
// let backBlock = document.querySelector('.close');

// Вешаем клики на все открывашки
openButtons.forEach(btn => {
  btn.addEventListener('click', e => {  
    // дергаем ID из data-атрибута
    const targetId = e.target.dataset.target;
    document.getElementById(targetId).classList.add('open-hidden-block');
  });
});

// Перебираем все блоки и ищем в них закрывашки
document.querySelectorAll('.hidden-block').forEach(block => {
  const closer = block.querySelector('.close');
  closer.addEventListener('click', () => {
    block.classList.remove('open-hidden-block');
  });
});