Максим Варава

Теория
Делаем два слоя A и B, которые будут раздвигающимися половинками. Каждый из этих слоев имеет высоту H и `overflow: hidden`. Делаем два слоя с одинаковым содержимым X и Y, каждый из которых имеет высоту H*2 и выравнивание текста по вертикали. Вставляем слой X в слой A и абсолютно позиционируем его по верхнему краю. Вставляем слой Y в слой B и абсолютно позиционируем его по нижнему краю. Таким образом мы добьемся того, что слои A и B это как будто бы один слой с монолитным содержимым. Под слоями A и B размещаем слой C, который и будет появляется при "разрыве" слоев А и B.

Схема


Реализация
https://jsfiddle.net/vwdfqkph/1/

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

Примерно так

Очевидно, потому, что в вашем HTML-коде нет элемента с селектором input[name=inp-price]
По стандарту селектор должен выглядеть как input[name="inp-price"]

Обходите все option:selected, суммируя data-price и закидывая data-name в массив:

$('.select-spa').on('change', function() {
  const data = $('option:selected').get().reduce((acc, n) => {
    acc.names.push(n.dataset.name);
    acc.price += +n.dataset.price;
    return acc;
  }, { names: [], price: 0 });

  $('.chose').text(data.names.join(', '));
  $('.to-pay .result-select').val(data.price);
});

$('.price-inp').change(function() {
  const val = Math.round($(this).val() / 100) * 100;
  $(this).add('.result').val(val);
});

Подсказали что правильно сделать через атрибут data-*

Ну да. Добавляете блокам такие же data-key, как у тех элементов, по клику на которые блоки надо показывать. По клику хватаете все блоки и показываете те, у которых data-key совпал с кликнутым, остальные скрываете:

const key = 'key';
const buttonSelector = `a[data-${key}]`;
const contentSelector = `div[data-${key}]`;

$(document).on('click', buttonSelector, function() {
  $(contentSelector)
    .hide()
    .filter((i, n) => n.dataset[key] === this.dataset[key])
    .show();
});

// или

document.addEventListener('click', ({ target: t }) => {
  if (t = t.closest(buttonSelector)) {
    document.querySelectorAll(contentSelector).forEach(n => {
      n.hidden = n.dataset[key] !== t.dataset[key];
      // или (надо будет в стили добавить .hidden { display: none; })
      n.classList.toggle('hidden', n.dataset[key] !== t.dataset[key]);
    });
  }
});

Вот пример, прикручивайте к нему свои числа

Насколько я помню, об этом написано в документации к on. Что-то вроде event.stopPropagation()

* UPDATED:
Попробуйте вот это. На Vue.js лучше, чем на jQuery

Использовать родственные связи (через parent, next, prev и т.д.)
https://jsfiddle.net/ugdj55qw/

Библиотеку jquery залил напрямую c google

jQuery доступна в WordPress по умолчанию.

Попробуйте так:

function my_scripts_method() {
    $tpl = get_stylesheet_directory_uri();
    wp_enqueue_script('bootstrap', $tpl . '/js/bootstrap.min.js', array('jquery'));
}
add_action('wp_enqueue_scripts', 'my_scripts_method');