no_one_safe

1. Вместо клика на < li> отлавливайте клик на < a>
2. У вас ссылки и контейнеры одинаковый класс содержат - tab1, лучше разделить.
3. В чем вопрос? Что у вас не получается? Чего вы хотите добиться?

BeforeIndex
в /bitrix/php_interface/init.php:

AddEventHandler("search", "BeforeIndex", Array("BeforeIndex", "BeforeIndexHandler"));
CModule::AddAutoloadClasses('', array(
    'BeforeIndex' => '/bitrix/php_interface/classes/BeforeIndex.php',
        )
);

в /bitrix/php_interface/classes/BeforeIndex.php:

class BeforeIndex {

    function BeforeIndexHandler($arFields) {
        $IBLOCK_ID = 1 //нужный инфоблок
        if ($arFields["MODULE_ID"] == "iblock" && $arFields["PARAM2"] == $IBLOCK_ID) {
            
            $arSelect = Array("ID", "NAME", "PROPERTY_FILE");
            $arFilter = Array("IBLOCK_ID" => $IBLOCK_ID, "ID" => $arFields['ITEM_ID']);
            $res = CIBlockElement::GetList(Array(), $arFilter, false, false, $arSelect);
            if ($ar_res = $res->GetNext()) {
                //Тут узнаете есть ли файлы или нет и тянете их DESCRIPTION
                ...
                $arFields["BODY"].= PHP_EOL.$DESCRIPTION;
            }
        }
        return $arFields;
    }

}

"FILTER_NAME" => "arrFilter",

UPD. НЕ заметил указанного этого параметра.
Проблема в том, что компонент catalog.section не принимает глобальный фильтр [И в коде не работает с ним]. Да, такая беда.
Варианта 2:
1. Использовать для вывода catalog.top (Который учитывает этот фильтр)
2. Допилить catalog.section. Перенести в свое пространство и на 466 строке

$arFilter = array(
		"IBLOCK_ID"=>$arParams["IBLOCK_ID"],
		"IBLOCK_ACTIVE"=>"Y",
		"ACTIVE"=>"Y",
		"GLOBAL_ACTIVE"=>"Y",
	);

заменить на примерно

if(strlen($arParams["FILTER_NAME"])<=0 || !preg_match("/^[A-Za-z_][A-Za-z01-9_]*$/", $arParams["FILTER_NAME"]))
{
	$arrFilter = array();
}
else
{
	$arrFilter = $GLOBALS[$arParams["FILTER_NAME"]];
	if(!is_array($arrFilter))
		$arrFilter = array();
}
$arFilter = array_merge(array(
		"IBLOCK_ID"=>$arParams["IBLOCK_ID"],
		"IBLOCK_ACTIVE"=>"Y",
		"ACTIVE"=>"Y",
		"GLOBAL_ACTIVE"=>"Y",
	),$arrFilter);

Конечно, при этом в $arParams в файле section.php в шаблоне компонента подать и имя фильтра, т.е.

"FILTER_NAME" => $arParams['FILTER_NAME'],

значит либо в хедере, либо в футере стоит компонент, который не находит либо раздел либо элемент инфоблока, а в настройках у него стоит "SET_STATUS_404" => "Y", . Элемент/раздел не найден - ставит заголовок 404.

Причем тут js? У вас выбор торгового предложения должен на сервере уже происходить.
Компонент какой используете? Судя по коду шаблону catalog.element (catalog комплексный)
Так вот в $arResult есть ключ $arResult["SELECTED_OFFER"] (или как то так). Он обычно равен 0.
И также есть список предложений:

$arResult['OFFERS'] = array(
0=>array(...),
1=>array(...),
2=>array(...),
 и т.д.
);

Для решения задачи вам необходимо учесть 2 проблемы:
1. Кеширование компонента.
2. Выбор активного торгового предложения.

При вызове компонента catalog вы в настройки компонента добавьте переменную $_GET["pid"] - т.о образом для каждого торгового предложения у вас будет свой кеш.
например:

<?$APPLICATION->IncludeComponent(
    "bitrix:catalog",
    "",
Array(
        "TEMPLATE_THEME" => "blue",
        "IBLOCK_TYPE" => "catalog",
        "IBLOCK_ID" => "2",
"SELECTED_OFFER_ID"=>(isset($_GET["pid"]) && intval($_GET["pid"]) > 0 ?$_GET["pid"]:0),
.............

И затем в шаблоне в файле element.php:

<?$APPLICATION->IncludeComponent(
    "bitrix:catalog.element",
    "",
    Array(
        "SELECTED_OFFER_ID" => $arParams["SELECTED_OFFER_ID"],

в шаблоне bitrix:catalog.element создаете файл result_modifier, там пробегаетесь по всем $arResult['OFFERS'] - и если ID совпадает - делаете ключ выбранным торговым предложением:

<?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();
foreach($arResult['OFFERS'] as $offer_key=>$arOffer){
   if(intval($arParams["SELECTED_OFFER_ID"]) == intval($arOffer['ID'])){
      $arResult["SELECTED_OFFER"] = $offer_key;
      break;
   }
}

в шаблоне:

<ul class="offer-list">
      <? foreach ($arResult['OFFERS'] as $iKey => $arOffer): ?>
         <li data-id="<?= $arOffer['ID']; ?>"<?= ($iKey == $arResult["SELECTED_OFFER"]) ? ' class="active"' : ''; ?>>
         <? if ($arOffer['PRICES'][$sPriceCode]['CAN_BUY'] == 'Y' && $arOffer['CATALOG_AVAILABLE'] == 'Y'): ?>
             <span><?= $arOffer['PRICES'][$sPriceCode]['PRINT_DISCOUNT_VALUE']; ?></span>
      <? endif; ?>
       <?= $arOffer['NAME']; ?>
        </li>
       <? endforeach; ?>
         </ul>

<table>
<?php foreach($data as $key=>$value):?>
<tr id="id_<?php echo $key; ?>">
<td><?php echo $value['var1']; ?></td>
<td><?php echo $value['var2']; ?></td>
<td><?php echo $value['var3']; ?></td>
</tr>
<?php endforeach; ?>
</table>

Оно?