0xD34F

А сколько у вас input'ов, чей name оканчивается на "username"? При получении значения метод val возвращает значение первого элемента, а при установке - устанавливает всем. Если input'ов несколько, и вы пытаетесь работать не с первым... ну, получится то, что вы описали.

То, что вы понимаете под словом "символ" - этого в JS нет. Есть строки единичной длины.

Перезаписать вы пытаетесь элемент не массива, а строки. Это невозможно - строки в JS иммутабельны.

Создавайте новую строку:

const titleCase = str => str
  .toLowerCase()
  .split(' ')
  .map(n => n[0].toUpperCase() + n.slice(1))
  .join(' ');

или

const titleCase = str => str
  .toLowerCase()
  .replace(/(?<=^| )./g, m => m.toUpperCase());

или

const titleCase = str => Array
  .from(str, (n, i) => n[i && str[i - 1] !== ' ' ? 'toLowerCase' : 'toUpperCase']())
  .join``;

$('.popup-link').magnificPopup({
  midClick: true,
  type: 'inline',
  callbacks: {
    open() {
      const $slider = $('.slider');

      if (!$slider.hasClass('slick-initialized')) {
        $slider.slick({
          infinite: true,
          slidesToShow: 1,
          dots: true,
        });
      }

      $slider.slick('slickGoTo', +$(this).attr('index'));
    },
  },
});

Давайте посмотрим:

(() => {}) instanceof Object // true

Ну да, объект. Кто бы мог подумать.

case TOGGLE_TODO:
  return {
    ...state,
    todos: state.todos.map(n => n.id === action.id
      ? { ...n, completed: !n.completed }
      : n
    ),
  };

Копируете массив, меняете элементы местами, отправляете его родителю. Например.

Открываем консоль, а там... а там... а там вот что:

Mixed Content: The page at 'https://jsfiddle.net/' was loaded over HTTPS, but requested an insecure script 'http://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js'. This request has been blocked; the content must be served over HTTPS.

Ну и всё, не загружен slick.

Нужны две штуки: функция, которая превратит nested set в настоящее дерево (в смысле - из плоской структуры сделает вложенную) и рекурсивный компонент, который это дерево отобразит. Например.

Где элементы находятся, что за элементы, как просуммировать, что сделать с суммой:

const container = document;
const selector = 'input[type="checkbox"]';
const sumElements = elements =>
  Array.prototype.reduce.call(elements, (acc, n) => acc + +n.value, 0);
const onSumChange = sum => console.log(sum);

Полный пересчёт суммы при любых изменениях + делегирование:

container.addEventListener('change', function({ target: t }) {
  if (t.matches(selector)) {
    onSumChange(sumElements(this.querySelectorAll(`${selector}:checked`)));
  }
});

container.querySelector(selector).dispatchEvent(new Event('change', { bubbles: true }));

Или, исправление суммы с учётом конкретного чекбокса, изменившего своё состояние + обработчик события цепляется к каждому чекбоксу индивидуально:

const cb = container.querySelectorAll(selector);
let sum = sumElements(Array.prototype.filter.call(cb, n => n.checked));
const onChange = e => onSumChange(sum += e.target.value * [ -1, 1 ][+e.target.checked]);
cb.forEach(n => n.addEventListener('change', onChange));
onSumChange(sum);

el.addEventListener('input', function() {
  this.value = this.value.replace(/[^а-яё\s]/ig, '');
});

[^.]+$

Сделайте вычисляемое свойство, где будет производится объединение данных.

str.slice(1).split('&').reduce((acc, n) => (n = n.split('='), acc[n[0]] = n[1], acc), {})

// или

[...str.matchAll(/(\w+)=([^&]*)/g)].reduce((acc, [ , k, v ]) => ({ ...acc, [k]: v }), {})

// или

Object.fromEntries(new URLSearchParams(str))

Кладём данные в vuex, компоненты списка сообщений и отдельного сообщения вешаем на разные роуты. Последний будет принимать id в качестве параметра и пробрасывать его в компонент. В самом компоненте добавляем вычисляемое свойство - по id из хранилища извлекается нужный объект. Например.

Сделать объект, где ключами и значениями будут возможные значения stage и соответствующие им значения, передаваемые в emit первым параметром:

const STAGES = {
  2: 'itemGv',
  5: 'itemTm',
};

После этого множество условных операторов внутри цикла можно заменить на один - извлекаем из объекта значение, проверяем, что оно не мусор:

for (const [ key, val ] of Object.entries(items)) {
  const s = STAGES[val.stage];
  if (s) {
    this.client.srem('items', key);
    this.emit(s, val);
  }
}

Вместо

li(class=list.class)= list.desc

должно быть

li(class=item.class)= item.desc

const XXX = length => Array
  .from({ length }, (n, i) => Array
    .from({ length: i + 1 }, (n, i) => i + 1)
    .join(','))
  .join('\n');

console.log(XXX(5));

или

const XXX = length => Array
  .from({ length }, function() {
    this.push(-~this.length);
    return this.join`,`;
  }, [])
  .join`\n`;

или

const XXX = length => Array
  .from({ length }, (n, i) => Array
    .from(Array(++i).keys())
    .reduce((acc, n) => acc + (acc && ',') + ++n, ''))
  .reduce((acc, n) => acc + (acc && '\n') + n, '');

const SKILLS = {
  sport: [ 'running', 'squats', 'snowboarding' ],
  music: [ 'guitar', 'drums' ],
};

const filterBySkill = (people, filter) =>
  people.filter(({ skills }) =>
    skills.every(n => filter.some(m => SKILLS[m].includes(n))) &&
    filter.every(n => skills.some(m => SKILLS[n].includes(m)))
  );

<div id="time"></div>

function setTimer(el, template) {
  return setInterval(el => {
    const d = new Date();
    const timeData = Object.fromEntries([
      [ 'h', 'getHours' ],
      [ 'm', 'getMinutes' ],
      [ 's', 'getSeconds' ],
    ].map(n => [ n[0], `${d[n[1]]()}`.padStart(2, 0) ]));

    el.innerHTML = template.replace(
      /\$(\w)/g,
      (m, g1) => timeData.hasOwnProperty(g1) ? timeData[g1] : m
    );
  }, 1000, typeof el === 'string' ? document.querySelector(el) : el);
}


const intervalId = setTimer('#time', '<strong>Сейчас</strong> $h:$m:$s');