Передача куска HTML через значение массива.
 

Здравствуйте, Друзья!
Помогите советом, понимаю что задачка пустяковая, но решить не могу уже второй день. в js не сильно силен к сожалению.

Задача такая,
Есть сайт одностраничный на битриксе, на нем есть блок товары, в виде карусели, в блок соответственно товары подгружаются из инфоблока.
У товара есть свойства:

1. Название
2. Детальная картинка
3. Описание (Возможно в html)
4. Дополнительные картинки
5. Цена

в карусели выводится превью_картинка, название, цена и анонс описания.
Если щелкнуть по товару появляется попап-окно с детальной информацией о товаре и формой заказа.
В нем выводится:

1. Название
2. Все картинки
3. Полное описание (Возможно в html)
4. Цена
5. Форма заказа

Естественно для каждого товара попап отдельный не будешь делать, потому все значения в него подгружаются при нажатии на товар.

Сделать я решил так:
Для каждого товара, при генерации страницы, генерируется ассоциативный массив (объект) в js, а при нажатии на товар этот массив передается функции которая осуществляет подмену в попап окошке.

выглядит в коде это вот так:

<script>
var good_<?=$arElement["ID"];?> = {
  name: '<?=$arElement["NAME"];?>',
  price: '<?=$arElement["PROPERTIES"]["CATALOG_PRICE"]["VALUE"]?><?=$arElement["PROPERTIES"]["CATALOG_VALUTA"]["VALUE"]?>',
  photo: {
	0: '<?=$arElement["DETAIL_PICTURE"]["SRC"];?>',
	<?for($i = 1; $i< count($arElement["PROPERTIES"]["CATALOG_PHOTO"]["VALUE"])+1; $i++){?>
		<?=$i;?>: '<?=CFile::GetPath($arElement["PROPERTIES"]["CATALOG_PHOTO"]["VALUE"][$i-1]);?>',
	<?}?>
}
  text: '<?=htmlspecialchars($arElement["PREVIEW_TEXT"]);?>',
}
</script>
<button class="btn btn-class btn-block" data-toggle="modal" data-target="#goodsModal" onclick="goods_modal(good_<?=$arElement["ID"];?>)">Подробнее</button>

в отдаче сервера вот так:

<script>
	var good_18 = {
		name: 'Тестовый товар',
		price: '100руб.',
		photo: {
			0: '/upload/iblock/7ce/12.jpg',
			1: '/upload/iblock/e18/1.jpg',
		}
		text: 'text text text text text text text text text text text ',
	}
</script>
<button class="btn btn-class btn-block" data-toggle="modal" data-target="#goodsModal" onclick="goods_modal(good_18)">Подробнее</button>

Проблема возникает если Описание товара представлено в виде html.
Оно передается в элемент text массива. Если значение в виде простого текста, как в примере выше (text: 'text text text text text text text text text text text '), то все работает значение передается, но если значение в виде кода html, например:

text text text</br>
text text text</br>
text text text

то js выдает ошибку при составлении такого массива. т.е. при попытке передачи массива функции (onclick="goods_modal(good_18)") вылетает ошибка: Uncaught ReferenceError: good_18 is not defined, ну и соответственно ничего не передается и не меняется.

Сначала думал что нужно подменить спецсимволы на код, потому вставил в исходный код htmlspecialchars, но и это не помогло

Вот как то так, помогите, пожалуйста, разобраться, а то всю голову уже сломал, почему не "клеится"...

Нужно из переменной $arElement["PREVIEW_TEXT"] удалить переводы строк

в смысле? </br>? они как бы могут быть нужны и их я привел лишь для примера, могут быть и списки и span и все что угодно, и все это не работает

Разобрался, понял про какие переносы имелось ввиду, вот это теперь работает:

text: '<?=str_replace("\n", "", $arElement["PREVIEW_TEXT"]);?>'

Спасибо за подсказку))