ТемноКот

Тут 6 параметров – две группы по 3:

1. кого слушаем #search_table VS #search_card
   
2. что ищем input[name^=name] VS [data-item-name="name"]
   
3. и с чем сравниваем val() VS text()
   

Вытащить всё в параметры:

const addFilter = (listenSelector, findSelector, methodName) => {
  $(listenSelector).keyup(function search() {
    const search = this;
    const searchValue = $(search).val().toLowerCase();

    $("#tabname tbody tr")
      .find(findSelector)
      .each(function () {
        const currentValue = $(this)[methodName]().toLowerCase();
        $(this).closest("tr").toggle(currentValue.includes(searchValue));
      });
  });
};

addFilter('#search_table', 'input[name^=name]', 'val');
addFilter('#search_card', '[data-item-name="name"]', 'text');

Можно в src вставить https://rutube.ru/api/video/{videoId}/thumbnail/?r...

$result = [];
foreach ($arr as $key => $vals) {
    foreach ($vals as $idx => $val) {
    	$result[$idx][$key] = $val
    }
}

foreach ($_POST['id'] as $key => $value) {
	$id = $value;
	$name = $_POST['name'][$key];
	$price = $_POST['cena_no_dost'][$key];

	$text .= "({$id}, '{$name}', {$price}),\r\n";
}

Правильно понимаю, что нужно - если окно больше 768 - то должен быть slideToggle, если меньше - то slideDown?
Зачем слушать каждое событие ресайза, вот все проще и работает, слушаем только событие клик. Большое окно - туда сюда, маленькое только туда )

$('.js_open_footer_menu').on('click',function () {
    var windowWidth = $(window).width();
    if (windowWidth > '768') {
      $(this).next('ul').slideToggle();
      $(this).toggleClass('active');
    } else {
        $('.js_open_footer_menu').next('ul').slideDown();
    }
  });

P.S. виноват, протупил что у вас условие на меньше, но не суть

<?php

$datapost = array(
  array(
    'header' => 'город Москва',	
    'category_id' => '1',
  ),
  array(
    'header' => 'село Огонёво',	
    'category_id' => '2',
  ),
  array(
    'header' => 'село Быстрино',	
    'category_id' => '2',
  ),
  array(
    'header' => 'посёлок Восточный',	
    'category_id' => '7',
  ),
);

$query = mysqli_query($connect, "SELECT `id` FROM `category` ");
$rows = mysqli_fetch_all($query, MYSQLI_ASSOC);

$arIDs = [];

foreach($rows as $row) {
    $arIDs[$row['id']] = $row['id'];
}

$arResults = [];

foreach($datapost as $data) {

    if(array_key_exists($data['category_id'], $arIDs))
        $arResults[$data['category_id']][] = $data;

}

print_r($arResults);

А нельзя ли как-то упростить?

На вкус и цвет, конечно, но я бы первым делом избавился от всех этих symbol и use. Без них воспринимать код проще, а из условий задачи вроде бы не следует, что они прямо нужны:

<svg width="200" height="300">
    <mask id="my-mask">
        <g stroke="gray" stroke-width="12" fill="white">
            <circle cx="33%" cy="30%" r="20%" />
            <circle cx="52%" cy="62%" r="32%" />
        </g>
    </mask>
</svg>

<!-- 1 -->
<svg width="200" height="300">
    <image href="https://picsum.photos/id/1/200/300" width="200" height="300" mask="url(#my-mask)"/>
</svg>

<!-- 2 -->
<svg width="200" height="300">
    <image href="https://picsum.photos/id/2/200/300" width="200" height="300" mask="url(#my-mask)"/>
</svg>

<!-- ...100500 -->
<svg width="200" height="300">
    <image href="https://picsum.photos/id/3/200/300" width="200" height="300" mask="url(#my-mask)"/>
</svg>

Ну а если вы хотите use, то да, все так, как вы и написали - много id, и следить, чтобы они случайно не продублировались при сборке страницы, а то начнется магия.

masonry.desandro.com

На любой вкус codepen.io/alanhouser/pen/zrXJpW

Как говорится, ябзаверстал (за магические числа в примере ответственности не несу, был пьян).

Можно взять базовую разметку:

.project-timeline
    .step
        .number 1
        .content Lorem ipsum dolor sit amet.
    .step
        .number 2
        .content Lorem ipsum dolor sit amet.
    ....

С помощью CSS-трансформаций перевернуть половину элементов, а их содержимое перевернуть еще раз.


На маленьких экранах все повернуть еще раз.



---
CodePen