Как обновить кнопку «В закладки» без перезагрузки?

Question

[Иван]

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

Вот код кнопки:

<div class="tns-carousel-wrapper tns-controls-outside-xxl tns-nav-outside tns-nav-outside-flush mx-n2">
          <div class="tns-carousel-inner row gx-4 mx-0 pt-3 pb-4" data-carousel-options="{&quot;items&quot;: 4, &quot;responsive&quot;: {&quot;0&quot;:{&quot;items&quot;:1},&quot;500&quot;:{&quot;items&quot;:2},&quot;768&quot;:{&quot;items&quot;:3},&quot;992&quot;:{&quot;items&quot;:4}}}">
            <!-- Item-->
            <div class="col">
                  <div class="content-overlay end-0 top-0 pt-3 pe-3">
                    {favorites}
                  </div>
            </div>
          </div>
        </div>

Код {favorites} формируется этим скриптом

$tpl->result['main'] = str_replace ( "{-favorites-{$fav_id}}", "<a id=\"fav-id-{$fav_id}\" class=\"favorite-link del-favorite\" href=\"{$PHP_SELF}?do=favorites&amp;doaction=del&amp;id={$fav_id}\"><img src=\"{$config['http_home_url']}templates/{$config['skin']}/dleimages/minus_fav.png\" onclick=\"doFavorites('{$fav_id}', 'minus', 0); return false;\" title=\"{$lang['news_minfav']}\" alt=\"\"></a>", $tpl->result['main'] );

	$tpl->result['main'] = preg_replace( "'\\{-favorites-(\d+)\\}'i", "<a id=\"fav-id-\\1\" class=\"favorite-link add-favorite\" href=\"{$PHP_SELF}?do=favorites&amp;doaction=add&amp;id=\\1\"><img src=\"{$config['http_home_url']}templates/{$config['skin']}/dleimages/plus_fav.png\" onclick=\"doFavorites('\\1', 'plus', 0); return false;\" title=\"{$lang['news_addfav']}\" alt=\"\"></a>", $tpl->result['main'] );

и

else $buffer = "<img src=\"" . $config['http_home_url'] . "templates/{$config['skin']}/dleimages/minus_fav.png\" onclick=\"doFavorites('" . $id . "', 'minus'); return false;\" title=\"" . $lang['news_minfav'] . "\" style=\"vertical-align: middle;border: none;\" />";

	else $buffer = "<img src=\"" . $config['http_home_url'] . "templates/{$config['skin']}/dleimages/plus_fav.png\" onclick=\"doFavorites('" . $id . "', 'plus'); return false;\" title=\"" . $lang['news_addfav'] . "\" style=\"vertical-align: middle;border: none;\" />";

JS отвечающий за блок-слайдер в котором размещается данная кнопка

(function (e, t, r) {
            for (var a = 0; a < e.length; a++) t.call(r, a, e[a]);
        })(document.querySelectorAll(".tns-carousel-wrapper .tns-carousel-inner"), function (e, t) {
            var r =
                    null != t.dataset.carouselOptions && "vertical" === JSON.parse(t.dataset.carouselOptions).axis
                        ? ['<i class="fi-chevron-up"></i>', '<i class="fi-chevron-down"></i>']
                        : ['<i class="fi-chevron-left"></i>', '<i class="fi-chevron-right"></i>'],
                a = { container: t, controlsText: r, navPosition: "bottom", mouseDrag: !0, speed: 500, autoplayHoverPause: !0, autoplayButtonOutput: !1 };
            null != t.dataset.carouselOptions && (o = JSON.parse(t.dataset.carouselOptions));//edit
            var r = Object.assign({}, a, o),
                n = tns(r),
                a = t.closest(".tns-carousel-wrapper"),
                o = (a.querySelectorAll(".tns-item"), n.getInfo()),
                i = a.querySelector(".tns-current-slide"),
                r = a.querySelector(".tns-total-slides");
            a.classList.contains("tns-center") &&
                ((t = o.index),
                o.slideItems[t].classList.add("active"),
                n.events.on("indexChanged", function () {
                    var e = n.getInfo(),
                        t = e.indexCached,
                        r = e.index;
                    e.slideItems[t].classList.remove("active"), e.slideItems[r].classList.add("active");
                })),
                null !== a.querySelector(".tns-slides-count") &&
                    ((i.innerHTML = o.displayIndex),
                    (r.innerHTML = o.slideCount),
                    n.events.on("indexChanged", function () {
                        var e = n.getInfo();
                        i.innerHTML = e.displayIndex;
                    }));
        })

Проблема в том, что кнопка добавить в закладки работает только в одном направлении - добавляет при этом не обновляя саму кнопку, естественно визуально не заметно, что добавил в закладки. Удалить из закладок нет возможности.

Методом тыка понял, что проблема видимо в div tns-carousel-wrapper и/или div tns-carousel-inner, т.е. либо со стилями либо с JS, т.к. если удалить, например, div tns-carousel-inner то кнопка отлично работает, так как и нужно, но сам слайдер раскидывает блоки по странице, не вытягивая в слайдер.
5 блоков, 5 должен быть скрыт.



Как отредактировать JS чтобы он сохранил верное отображение блоков и не мешал добавлению в закладки?

Слайдер

Спасибо!