Павел

Какие самые топовые двигатели существуют?
Где заканчиваются возможности двигателей и начинаются возможности других способов что-либо двигать?

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

Так же и тут - "топовых" небывает, есть популярные для решения конкретных видов задач.
Любая CMS это обычно веб-продукт, и при желании ВСЕ можно реализовать в CMS, просто иногда задача бывает такова, что нет смысла переписывать CMS, а проще написать с нуля свое.

\n перенос, \t табуляция

var num = 1;
$('.b1').on('click', function (e) {
  num = parseInt($(this).data('num')); 
})

$('.modal').on('shown.bs.modal', function () {
  $('.slider__prod').slick({
    initialSlide: num-1,
    arrows: true,
    prevArrow: '<button class="slick-prev slick-arrow" aria-label="Prev" type="button" style=""><i class="fa fa-chevron-left" aria-hidden="true"></i></button>',
    nextArrow: '<button class="slick-next slick-arrow" aria-label="Next" type="button" style=""><i class="fa fa-chevron-right" aria-hidden="true"></i></button>'
  });
});

content-type: text/plain заменить на content-type: text/html

Ну и откуда тогда должна браться цена, если селект с ценой отсутствует? Можете подставлять случайное значение - как, подойдёт такой ответ? Нет? Тогда дополняйте вопрос.

UPD.

Цена завернута в див price prc-new

ОК, тогда замените

$('[name="variant"] option:checked').data('price')

на

$('.price.prc-new span').text()

$('input').on('input', function() {
  $(this).val((i, v) => Math.max(this.min, Math.min(this.max, v)));
});

или

document.querySelector('input').addEventListener('input', ({ target: t }) => {
  t.value = Math.max(t.min, Math.min(t.max, t.value));
});

$('.price').text((i, text) => {
  const [ price, currency ] = text.split(' ');
  return `${(+price).toLocaleString()} ${currency}`;
});

// или

document.querySelectorAll('.price').forEach(n => {
  n.textContent = n.textContent.replace(/\d(?=(\d{3})+\D)/g, '$& ');
});

Ну или (что желательно), перед выводом пропускайте цену через toLocaleString.

А пути то хоть какие у приложений?

Если вебморда облака висит на 80-м порту, и располагается в /var/www, то создайте подпапку application там и суньте туда ваш проект, который станет доступным по адресу:
http://айпишник/application

Можно субдоменом сделать, если днс поднят, но судя по вопросу - вам проще подпапку создать как я выше написал, или симлинк бросить

На регистратор проще всего писать. Если хочется дешевле - купить плату регистратора - стоит 1500 на алишке. В камере надо включить Onvif.

const buttonSelector = '.button';
const blockSelector = '.div';
const activeClass = 'red';

function toggleBlock(blocks, buttons, button) {
  const index = Array.prototype.indexOf.call(buttons, button);
  blocks.forEach((n, i) => {
    n.classList[i === index ? 'toggle' : 'remove'](activeClass);
  });
}


// обработчик клика делегированный, назначается один раз
document.addEventListener('click', e => {
  const button = e.target.closest(buttonSelector);
  if (button) {
    const blocks = document.querySelectorAll(blockSelector);
    const buttons = document.querySelectorAll(buttonSelector);
    toggleBlock(blocks, buttons, button);
  }
});

// или, назначаем обработчик клика каждой кнопке индивидуально
const buttons = document.querySelectorAll(buttonSelector);
const blocks = document.querySelectorAll(blockSelector);
const onClick = e => toggleBlock(blocks, buttons, e.currentTarget);
buttons.forEach(n => n.addEventListener('click', onClick));

$(document).on('click', '.open-modal-button', function (e) {
        $.ajax({
            //бла бла бла
        });
    })

$(document).on('someEvent','newElementSelector',function(){
   // do some stuff
})

O&O ShutUp10:
https://www.oo-software.com/en/shutup10

const data = $('.price')
  .filter((i, n) => +n.value)
  .closest('tr')
  .find('input[type="hidden"]')
  .get()
  .map(n => n.value);

или

const data = Array
  .from(document.querySelectorAll('.price'))
  .filter(n => +n.value)
  .map(n => n.closest('tr').querySelector('input[type="hidden"]').value);

или

const data = Array.prototype.reduce.call(
  document.getElementsByClassName('price'),
  (acc, { value: v, parentNode: { parentNode: tr } }) => (
    +v && acc.push(tr.cells[0].children[0].value),
    acc
  ),
  []
);

.xxx {
  background: silver;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  padding: 0.3em 0.6em;
  position: relative;
}

.xxx::before {
  content: "";
  width: 1em;
  height: 1em;
  left: -0.2em;
  top: -0.2em;
  background: orange;
  position: absolute;
  z-index: -1;
}

https://jsfiddle.net/km85s9fv/

Добавляем кнопкам атрибут, который будет указывать относительную позицию нового активного элемента:

<span class="prev" data-step="-1">Prev</span>
<span class="next" data-step="+1">Next</span>

Индекс нового активного элемента будет суммой индекса текущего и относительного положения нового. Чтобы произошёл переход из конца в начало - необходимо брать остаток от деления суммы на количество элементов, индекс несуществующего элемента, расположенного за последним, превратится в 0. Переход из начала в конец - в случае jquery ничего делать не надо, метод eq позволяет указывать отрицательные индексы, которые используются для отсчёта позиции элемента начиная с конца; в случае чистого js надо будет добавить к сумме количество элементов, чтобы потенциальное отрицательное значение стало положительным, и при этом не изменился остаток от деления.

const itemSelector = 'li';
const buttonSelector = '[data-step]';
const activeClass = 'active';

$(buttonSelector).click(function() {
  const { step } = this.dataset;
  const $items = $(itemSelector);
  const $active = $items.filter(`.${activeClass}`);

  $active.removeClass(activeClass);
  $items.eq(($active.index() + +step) % $items.length).addClass(activeClass);
});

// или

const items = document.querySelectorAll(itemSelector);
let index = 0;

document.querySelectorAll(buttonSelector).forEach(n => {
  n.addEventListener('click', onClick);
});

function onClick({ currentTarget: { dataset: { step } } }) {
  items[index].classList.remove(activeClass);
  index = (index + items.length + +step) % items.length;
  items[index].classList.add(activeClass);
}

Проще сделать как в документации написано, чем изобретать велосипед.
https://datatables.net/examples/api/counter_column...

Так что ли?