0xD34F

Получить отдельно, объединить: $('div').eq(0).add($('span').eq(0)).

Можно функцию сделать, которая будет принимать несколько селекторов:

const getFirst = (...selectors) => selectors.reduce((acc, n) => acc.add($(n)[0]), $());

const $first = getFirst('div', 'span');

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

const siblings = Array.prototype.filter.call(
  this.parentNode.children,
  n => n !== this
);

Это если делать по-простому. Но есть и дурацкий вариант - можно пробежаться по ссылкам на предыдущие и следующие элементы:

const siblings = [];
for (let el = this; (el = el.previousElementSibling); siblings.unshift(el)) ;
for (let el = this; (el = el.nextElementSibling); siblings.push(el)) ;

$('.openFormPopup').click(e => $('#btn-clicked').val(e.target.dataset.title));

const asyncForEach = (data, callback) =>
  Array.prototype.reduce.call(
    data,
    (promise, n, i, a) => promise.then(() => callback(n, i, a)),
    Promise.resolve()
  ).then(() => {});

// или

async function asyncForEach(data, callback) {
  for (const [ i, n ] of data.entries()) {
    await callback(n, i, data);
  }
}

asyncForEach(
  document.querySelectorAll('li'),
  li => new Promise(r => setTimeout(() => r(console.log(li.textContent)), 1000))
);

Здесь только регуляркой или как?

Конечно, использовать регулярные выражения не обязательно:

function incrementNumberInString(str) {
  for (let i = 0, iNum = -1; i < str.length; i++) {
    if ('0123456789'.includes(str[i])) {
      if (iNum === -1 && str[i - 1] === '[') {
        iNum = i;           
      }
    } else if (iNum !== -1 && str[i] === ']') {
      return str.slice(0, iNum) + (Number(str.slice(iNum, i)) + 1) + str.slice(i);
    } else {
      iNum = -1;
    }
  }

  return str;
}

Но с ними будет гораздо проще:

str.replace(/(?<=\[)\d+(?=\])/, m => ++m)
// или
str.replace(/\[\d+\]/, m => '[' + (m.slice(1, -1) - -1) + ']')
// или
str.replace(/\[(\d+)\]/, (m, g1) => `[${-~g1}]`)

const newArr = [];

for (const n of arr) {
  const [ us, s ] = n.us.split('-').map(n => n.split('_').map(Number));

  newArr.push({
    ...n,
    us: arr1.filter(n => us.includes(n)),
    s,
  });
}

или

const newArr = arr.map(function(n) {
  const us = n.us.match(/\d+/g).map(n => +n);
  const s = us.splice(-1);

  return {
    id: n.id,
    us: this(us),
    s,
  };
}, us => arr1.filter(Set.prototype.has.bind(new Set(us))));

const newStr = str.replace(/\d+$/, m => -~m);

// или

const i = str.lastIndexOf('_') + 1;
const newStr = str.slice(0, i) + (+str.slice(i) + 1);

// или

const newStr = str
  .split('__')
  .map((n, i, a) => ++i === a.length ? ++n : n)
  .join('__');

Зачем искать какие-то совпадения внутри строк? Вырезаете нужный кусок и проверяете его наличие в массиве:

const getFreeDomainsCount = arr => arr
  .map(n => n.split('@')[1])
  .filter(n => freeEmailDomains.includes(n))
  .reduce((acc, n) => (++acc[n], acc), Object.fromEntries(freeEmailDomains.map(n => [ n, 0 ])));

const obj = arr.find(n => n.id === newObj.id);
if (obj) {
  Object.assign(obj, newObj);
} else {
  arr.push(newObj);
}

Ожидаю увидеть в консоли name is not defined

для подобных ожиданий оснований нет

Скрыть элементы через задание им нулевого размера:

.hidden {
  transform: scale(0);
}

Чтобы появлялись плавно, добавить transition:

.item {
  transition: transform 0.5s;
}

Когда надо элементы показать, снять класс:

document.querySelectorAll('.item').forEach(n => n.classList.remove('hidden'));

https://jsfiddle.net/dgo3jmsa/

Сгруппировать arr2 по значениям parent_id:

const groupedArr2 = arr2.reduce((acc, n) => {
  (acc[n.parent_id] = acc[n.parent_id] || []).push(n);
  return acc;
}, {});

Дальше можно обновить существующий arr1:

arr1.forEach(n => n.arr2 = groupedArr2[n.id] || []);

Или собрать новый:

const newArr1 = arr1.map(n => ({ ...n, arr2: groupedArr2[n.id] || [] }));

$('.modification').on('change', function() {
  const sum = $('[type="radio"]:checked', this)
    .siblings('.radio__text')
    .get()
    .reduce((acc, n) => acc + +$(n).text(), 0);

  $('p span').text(sum);
}).trigger('change');

или

const container = document.querySelector('.modification');

container.addEventListener('change', e => {
  const sum = Array.prototype.reduce.call(
    e.currentTarget.querySelectorAll('[type="radio"]:checked'),
    (acc, n) => acc + +n.closest('.radio').querySelector('.radio__text').innerText,
    0
  );

  document.querySelector('p span').innerText = sum;
});

container.dispatchEvent(new Event('change'));

class Point {
  x: number;
  y: number;

  // дальше всё по-старому, constructor и т.д.

Так как получать элемент вы собираетесь внутри обработчика события, возникающего на этом элементе, то ничего искать не надо, всё уже есть - event.target. Надо только (так как обработчик делегированный) убедиться, что событие случилось действительно на одном из интересующих вас элементов (раз это textarea, то, например, путём проверки свойства tagName у целевого элемента).

Метод val умеет принимать в качестве параметра не только значение, но и функцию, которая принимает текущее значение и должна вернуть новое:

$(this).parent().find('input').val((i, v) => v - 1);

А можно и отказаться от jquery. Так ещё короче получится (конечно, если все нужные элементы гарантированно есть, т.е., не надо проверять их наличие):

this.parentNode.querySelector('input').value--;

Есть такой плагин, например. Заставить работать совместно с react'ом - элементарно.

Или вот готовый реактовский компонент.

Наверное, элемент, к которому прицеплен обработчик события, полностью перекрывается вложенным элементом. А так как mouseleave не всплывает, обрабатывать нечего.

Цепляйте обработчики к вложенным элементам (конечно, придётся отказаться от их постоянного пересоздания).

Строки же, сравниваются посимвольно. Вычитайте их, будут при этом автоматически преобразованы в числа:

return a.width - b.width

А лучше бы конечно ещё и разобраться с источником данных и получать числовые значения в виде чисел, а не строк.

Не надо сравнивать каждый с каждым, считайте количество повторений:

function duplicateEncode(str) {
  const arr = str.toLowerCase().split('');
  const count = arr.reduce((acc, n) => (acc[n] = (acc[n] || 0) + 1, acc), {});
  return arr.map(n => count[n] > 1 ? ')' : '(').join('');
}

Или не считайте:

function duplicateEncode(str) {
  const arr = [...str.toLowerCase()];
  const duplicates = arr.reduce((acc, n) => acc.set(n, acc.has(n)), new Map);
  return ''.concat(...arr.map(n => '()'[+duplicates.get(n)]));
}

const duplicateEncode = str => Object
  .values(Object
    .values(str.toLowerCase())
    .reduce((acc, n, i) => ((acc[n] = acc[n] || []).push(i), acc), {}))
  .reduce((acc, n) => (n.forEach(i => acc[i] = ~-n.length ? ')' : '('), acc), [])
  .reduce((acc, n) => `${acc}${n}`, '');

const duplicateEncode = str =>
  Array.prototype.reduce.call(
    str.toLowerCase(),
    (acc, n, i, a) => acc + (a.indexOf(n) === a.lastIndexOf(n) ? '(' : ')'),
    ''
  );

const duplicateEncode = str => str
  .toLowerCase()
  .replace(/./g, (m, _, s) => String.fromCharCode(40 + (s.split(m).length > 2)));