ThunderCat

ctrl+f
или на jq:

$('#search').on('keyup',function(e){
    var searchStr = $(this).val();
    var list = $(".классСторкиКаталога:contains('"+searchStr+"')" );//тут будут все элементы с заданным текстом
    doSomeStuff();
})

$(document).ready(function () {
setTimeout(function() {
  $("#form1").magnificPopup.close();
}, 1000);
}

И отображается нормально. Но если пробую сделать стиль у блока
background: url('/crops/a7305823253abf7706a');

надеюсь вы понимаете, что css файлы не исполняют код пхп, если вы туда что-либо и пропишете. Данный ключ /crops/a7305823253abf7706a читает временную картинку заданного в параметрах скрипта размера, его создает скрипт, просто прописав его вы не получите результат выполнения скрипта и данный путь будет пустым. Выхода 2, оба не идеальны, но в вашем случае есть необходимость в костылях, я так понимаю используется как фон картинка из большого массива данных (типа аватарок или чего-то подобного).
- Первый вариант - подключать css через методы пхп(инклуд, реквайр или как кусок шаблона), тогда вставленный код будет работать как надо, причем весь цсс так подключать не нужно, только кусок где у вас такие хитропопые бэкграунды используются.
- Второй вариант - как написал Максим Шимко - в нужных местах шаблона заменить на инлайн стили с прописанным бэкграундом скриптом.

для начала - var data = 10; и проверяйте если доходит значение. код пхп тоже не помешает, а то гадание на логах без кода не работает.
UPD: визуально в коде нет ошибок, что конкретно нарушает работу скрипта сказать сложно. Как вы получаете, кстати, вардамп, аяксом то? в ошибке парсинга нетворк консоли? Попробуйте $_REQUEST задампить, чет ниче особо больше пока не приходит в голову, кроме неочевидных багов, настроек сервера и неверных путей.

ну, если вы передаете секретные данные ИЗ ЯВАСКРИПТА, то они будут видны в коде независимо от того будете вы что-либо передавать каким либо способом или нет. Вы задачу опишите поконкретнее, а то явно что-то не туда вас понесло.

очень просто проверить - в первой строке скриптового файла пришешь alert(1);

С файлом все в порядке - он на месте, и путь прописан правильно (все-таки не первый день "замужем)))" )

А насчет путей - я бы не был так категоричен, пропиши пути от корня сайта(если это сайт, на что как бэ намекает тег пхп), то есть если в структуре сайта скрипты лежат в корне в папке js, то путь будет "/js/somescript.js", ибо магии не бывает.
Консоль проверь, неподключенные ресурсы в ней идут с ошибками.

А на кодепене не оно? Вроде работает же? Или я не так понял...

итак, наверно что-то не так в датском королевстве, потому как стили браузера являются наименее приоритетными в любом случае. Варианта всего 2:
1) Не подгружаются стили, соответственно отрабатывается что есть, а есть у нас инлайн и браузер стили.
2) Стили подгружаются, но свойства для элементов прописаны неверно, или не для тех классов.
Как проверить в чем проблема?
Во первых, проверить загружены ли файлы стилей, такая форма записи как у вас подразумевает что файл стиля лежит в той же папке что и хтмл файл. Правильной практикой является указывать путь от корня сайта, например <link rel="stylesheet" href="/css/style.css">, к слову, к изображениям это тоже относится.
Для проверки в хроме в панели разработчика есть закладка ресурсов(сырцов), где все прогруженные файлы отображаются. А так же проверяем какие стили поверх каких перекрываются в инспекторе элементов, как на картинке. и смотрим что к чему там относится.

проблема в том что строк second-class может быть 1000+, из-за этого они долго разворачиваются,

Они не из-за этого разворачиваются долго, а из-за того что это не табличная задача, перестройка таблицы на 1000 элементов само по себе задача нагруженная, а вы еще их туда-сюда вставляете в таблицу. Сверстайте по уму дивами и все будет работать быстро, див не требует соблюдения структуры табличной вложенности, по этому все будет отрабатывать быстрее в разы.

не лучше задавать селектором? типа такого, один для начала другой для конца.

По вопросу не очень понятно что вы хотите получить, если нужно рисовать фигуры на хтмл/цсс/жс есть варианты:
1) Канвас, как уже упомянула @nata-ponchik
2) CSS стили со скруглением углов для кругов
3) SVG объекты
4) тупо вставить картинку и наложить на нее текст, если надо, как написал Froggyweb, это не всегда подходит, но как вариант..
5) Извращения типа флеш и сильверлайт (привет из 2010).

Если поломать мозг пару часов можно еще вариантов настрочить - например расположить пнг с прозрачностью в нужных местах через позиционирование и z-index.

Есть обоснованное предположение что что-то вы не так или не туда вставляете, код в студию! Или ссылку на ваше творчество на каком-то ресурсе для кодов, https://pastebin.com/ например. А то это гадание на вареных макаронах.
так выглядят неподгруженные ресурсы

выучите обращение с путями.
/images/logo-c-online-ltd.png - путь от document_root
images/logo-c-online-ltd.png - путь от текущего открытого файла html или от текущего url
../images/logo-c-online-ltd.png - путь на папку выше от текущего открытого файла html или от текущего url
для динамических сайтов первый вариант предпочтительней.

выложить на бесплатный хостинг и сделать модерируемые комменты. Заспамить одноклассники и вк своей поделкой - вполне пару штук отзывов можно приличных выцепить, хотя может и как в масяне случиться )