0xD34F

document.getElementsByClassName('os-message-success js-client-payment-form-block').innerHTML

Во-первых, getElementsByClassName возвращает не один элемент, а коллекцию. Так что прежде чем пытаться получать свойства элемента, надо его из коллекции извлечь - по индексу.

Во-вторых, innerHTML возвращает всю внутреннюю разметку элемента. Что вы с ней собирались делать? Было бы разумнее добраться до вложенного элемента strong - и текст из него достать можно, и новый элемент вставить рядом с его соседом не проблема:

const strong = document.querySelector('.os-message-success br + strong');
const { nextElementSibling: br, textContent: text } = strong;
const sum = text.split(': ')[1].replace(/[\d+.]+/, m => (m * 0.975).toFixed(3));
br.insertAdjacentHTML('afterend', `<strong>К зачислению: ${sum}</strong>`);

Наверное, надо не строку, а массив класть в coordinates. Попробуйте заменить

'['.$row['y_coordinates'].']'

на что-то вроде

explode(', ', $row['y_coordinates'])

А если нужно, чтобы элементы массива были числами:

array_map('floatval', explode(', ', $row['y_coordinates']))

Надо добавлять к желаемому значению scrollTop текущий scrollTop контейнера, т.е.,

position = anchor.position().top;

замените на

position = anchor.position().top + $('#container').scrollTop();

А чем у вас сейчас отфильтрованные изображения отличаются от прочих? Видимостью. Под это дело у jquery есть специальный селектор, :visible. Вот с его помощью и отбирайте следующее изображение, например так.

UPD. Сразу не заметил, у вас там отфильтрованным изображениям назначается специальный класс - конечно, вместо :visible лучше использовать его (в примере по ссылке выше можно просто заменить одно на другое).

const buttonSelector = 'button';
const getButtons = () => document.querySelectorAll(buttonSelector);

Вариант раз - делегируем обработку кликов по кнопкам их общему предку, копируем разметку, слева направо:

document.addEventListener('click', ({ target: t }) => {
  if (t.closest(buttonSelector)) {
    const buttons = getButtons();
    const html = Array.from(buttons, n => n.innerHTML);
    for (const [ i, n ] of buttons.entries()) {
      n.innerHTML = html[~-(i || html.length)];
    }
  }
});

Вариант два - обработчик клика назначаем кнопкам, переносим вложенные узлы, справа налево:

const buttons = getButtons();
const onClick = () =>
  buttons.forEach(function(n, i, a) {
    n.append(...(++i < a.length ? a[i].childNodes : this));
  }, [...buttons[0].childNodes]);

buttons.forEach(n => n.addEventListener('click', onClick));

Оборачивайте текст в span'ы - тогда и проблем с поиском и удалением не будет.

Ну а если без span'ов, то... Откуда надо удалить: const el = document.querySelector('.line');.

Удаляем:

el.removeChild(el.childNodes[2]);

// или

el.querySelector('input').nextSibling.remove();

// или

el.lastChild.replaceWith();

Сделаем метод, получающий item и возвращающий его группу:

methods: {
  group(item) {
    return item && Object.entries(this.groups).find(([ k, v ]) => v.includes(item.group))[0];
  },

Сделаем вычисляемое свойство, представляющее выбранную группу:

computed: {
  selectedGroup() {
    return this.group([].concat(...this.data.map(n => n.items)).find(n => n.checked));
  },

Если выбранная группа есть и не совпадает с группой текущего item'а, блокируем чекбокс:

<ul v-for="{ items } in data">
  <li v-for="item in items">
    <label>
      <input
        type="checkbox"
        v-model="item.checked"
        :disabled="selectedGroup && selectedGroup !== group(item)"
      >
      {{ item.name }} ({{ group(item) }})
    </label>
  </li>
</ul>

https://jsfiddle.net/cqm1erza/

SELECT table_name
FROM information_schema.columns
WHERE column_name = 'type_vendor'

const $headers = $('.bf-attr-group-header');
$headers.each(i => $headers
  .eq(i)
  .nextUntil($headers.get(i + 1))
  .wrapAll('<div class="wrapper">')
);

или

document.querySelectorAll('.bf-attr-group-header').forEach((n, i, a) => {
  const wrapper = document.createElement('div');
  const elems = [];
  for (let el = n; (el = el.nextElementSibling) && el !== a[i + 1]; elems.push(el)) ;
  wrapper.append(...elems);
  wrapper.classList.add('wrapper');
  n.after(wrapper);
});

<div style={{ ...styles.inputInit, backgroundColor: 'green' }}>

По каким кнопкам надо кликать:

const buttons = document.querySelectorAll('кнопки ваши - вам и виднее, каким должен быть селектор');

Счётчик кликов может быть переменной:

for (const n of buttons) {
  let clicks = 0;
  n.onclick = () => n.innerText = 'clicked: '.concat(++clicks);
}

Или data-атрибутом:

buttons.forEach(function(n) {
  n.addEventListener('click', this);
}, ({ currentTarget: t }) => {
  t.textContent = `clicked: ${t.dataset.clicks = -~t.dataset.clicks}`;
});

$('span').text((i, text) => {
  return ~'+-'.indexOf(text.charAt()) ? text : `+${text}`;
});

или

for (const n of document.getElementsByTagName('span')) {
  n.innerText = '+'.slice('+-'.includes(n.innerText[0])) + n.innerText;
}

или

document.querySelectorAll('span').forEach(n => {
  n.textContent = n.textContent.replace(/^(?![+-])/, '+');
});

function getUrls($parts, $acc = '') {
  $urls = [];

  if (count($parts)) {
    $part = array_shift($parts);
    if (!is_array($part)) {
      $part = [ $part ];
    }

    foreach ($part as $p) {
      array_push($urls, ...getUrls($parts, ($acc ? $acc.'/' : '').$p));
    }
  } else {
    $urls[] = $acc;
  }

  return $urls;
}


$urls = getUrls($urlFragments);

function find(arr, id) {
  for (const { name, hobbies } of arr) {
    const { title } = hobbies.find(n => n.id === id) || {};
    if (title) {
      return { name, title };
    }
  }

  return null;
}


const data = find(arr, 4);

• Вариант раз.
  
  Добавить элементам массива mainCategories свойства, которые будут отвечать за состояния чекбоксов (по умолчанию имеют значения true); массив checkedCategories сделать вычисляемым:
  
  

  data: () => ({
    mainCategories: [
      { merchantId: '1', checked: true },
      { merchantId: '2', checked: true },
      ...
    ],
  }),
  computed: {
    checkedCategories() {
      return this.mainCategories.filter(n => n.checked).map(n => n.merchantId);
    },
  },

  
  

  <li v-for="n in mainCategories">
    <label>
      <input type="checkbox" v-model="n.checked">
      {{ n.merchantId }}
    </label>
  </li>

  
  
  
• Вариант два.
  
  При создании экземпляра компонента заполнить массив checkedCategories нужными значениями:
  
  

  created() {
    this.checkedCategories = this.mainCategories.map(n => n.merchantId);
  },

  
  
  

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

data: () => ({
  items: [
    { name:      'PHOTOSHOP', val: 88, color:    'red' },
    { name:    'ILLUSTRATOR', val: 92, color:  'green' },
    { name:         'SKETCH', val: 90, color: 'orange' },
    { name: 'AFFTER EFFECTS', val: 98, color:   'blue' },
  ],
}),

Затем сделаем методы, который будут генерировать текст и стили для рисования линии (в качестве линии можно использовать границу элемента, border-bottom например) у элемента списка:

methods: {
  liText: item => `${item.name} ${item.val}%`,
  liStyle: item => ({
    'border-bottom': `3px solid ${item.color}`,
    width: `${item.val}%`,
  }),
},

И, наконец, отрендерим список:

<ul>
  <li
    v-for="n in items"
    v-text="liText(n)"
    :style="liStyle(n)"
  ></li>
</ul>

Делаем нормально: [...new Set(arr)].

И ненормально:

Object.values(arr.reduce((acc, n) => (acc[n] = n, acc), {}))

// или

Array.from(new Map(arr.map(n => [ n, n ])).values())

// или

arr.filter(function(n) {
  return !(this[n] = this.hasOwnProperty(n));
}, {})

// или

arr.filter(((picked, n) => !picked.set(n, picked.has(n)).get(n)).bind(null, new Map))

// или

arr.filter((n, i, a) => i === a.indexOf(n))

// или

arr.reduce((acc, n) => (acc.includes(n) || acc.push(n), acc), [])

https://jsfiddle.net/6eLg3a8v/1/

$('p select').change(function() {
  $(this)
    .parent()
    .find('.colors').hide()
    .end()
    .find(`.${this.value}`).show();
});

display: flex; для nav
flex-direction: column; (и ширину какую надо ещё не забудьте) для .navigation--blok

Так?