Сергей delphinpro

<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');
  });
});

<?php if (have_rows('gallery')):
    $i = 1;
    ?>
    <?php while (have_rows('gallery')): the_row();
    $image_big = get_sub_field('image_big'); ?>
    <div class="modal fade" id="galleryModal-b-<?php echo $i; ?>" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered w-auto">
            <div class="modal-content">
                <img class="img-fluid mx-auto" src="<?php echo $image_big; ?>"
                     alt="Image">
                <div data-dismiss="modal" style="top:0;right:0;"
                     class="position-absolute modal-close font-alt fw-600 text-uppercase cursor-pointer z-index-1 text-white">
                    X Close
                </div>
            </div>
        </div>
    </div>
    <?php if (have_rows('image_small')):
        $j = 1; // Другое название
        ?>
        <?php while (have_rows('image_small')): the_row();
        $image = get_sub_field('image');
        ?>
        <div class="modal fade" tabindex="-1"
             id="galleryModal-s-<?php echo $i; ?>-<?php echo $j; ?>"> <!-- А здесь двойной индекс -->
            <div class="modal-dialog modal-dialog-centered w-auto">
                <div class="modal-content">
                    <img class="img-fluid mx-auto" src="<?php echo $image; ?>"
                         alt="Image">
                    <div data-dismiss="modal" style="top:0;right:0;"
                         class="position-absolute modal-close font-alt fw-600 text-uppercase cursor-pointer z-index-1 text-white">
                        X Close
                    </div>
                </div>
            </div>
        </div>
        <?php $j++; endwhile; ?> <!-- Другое название -->
    <?php endif; ?>
    <?php $i++; endwhile; ?>
<?php endif; ?>

if (страна_не_определена) {
  Определяем страну
}

return $next($request);

timeout = setTimeout( () => fn.apply(this, arguments), debounceTime );

const backgroundSection = document.getElementById('bgElem');
for(let i = 0; i < 45; i++) {
    const elem = document.createElement('span');
    backgroundSection.parentNode.appendChild(elem);
}

:root{
  font-size: 62.5%
}

body { font-size: 1.4rem; /* 14px */ }
h1 { font-size: 3.2rem; /* 32px */ }

@function toRem($px) {
  /* 16px – это значение шрифта по умолчанию в большинстве агентов */
  @return $px / 16px * 1rem;
}

body { font-size: toRem(14px); }
h1 { font-size: toRem(32px); }

for (let i = 0; i < elements.length; i++) {
    // проходим циклом по всем элементам массивоподобного объекта
    let stroka = elements[i].textContent;
    let newLi = document.createElement("li");
    newLi.textContent = stroka;
    ul.appendChild(newLi);
  }