0xD34F

function createTree(data) {
  const obl = {};
  const org = {};
  const podr = {};

  data.forEach(n => {
    obl[n.obl.id] = { ...n.obl, children: [] };
    org[n.org.id] = { ...n.org, children: [] };
    podr[n.podr.id] = { ...n.podr, children: [] };
  });

  data.forEach(n => podr[n.podr.id].children.push({ ...n.dolzh }));
  Object.values(org).forEach(n => obl[n.parent_obl].children.push(n));
  Object.values(podr).forEach(n => org[n.parent_org].children.push(n));

  return Object.values(obl);
}


const tree = createTree(arr);

Array.from([...str].reduce((acc, n) => acc.set(n, -~acc.get(n)), new Map), n => n[1] + n[0])

или

str.split('').sort().join('').match(/(.)\1*/g).map(n => n.length + n[0])

или

Array.from(new Set(str), n => str.replace(RegExp(`[^${n}]`, 'g'), '').length + n)

Рекурсия. Обходим дочерние элементы, смотрим уровень вложенности:

const walk = (el, level = 0) =>
  [...el.children].reduce((p, c) => {
    c = walk(c, level + 1);
    return p.level > c.level ? p : c;
  }, { el, level });

const getLastDeepestElement = root => walk(root).el;

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

const getDeepestLastElement = el =>
  el.lastElementChild
    ? getDeepestLastElement(el.lastElementChild)
    : el;

// или, без рекурсии
const getDeepestLastElement = el => Array
  .from(el.querySelectorAll('*'))
  .pop() || el;

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

.on('click', function(e) {
  e.stopPropagation();

Сделайте список значений, при которых элемент в #sample_form_pay надо показывать:

const valuesShow = [ 2000, ещё какое-то значение, и ещё, и ещё, ... ];

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

$('#sample_form_deliv').change(function({ target: { value } }) {
  $('#sample_form_pay .input-label:eq(2)').toggle(valuesShow.includes(+value));
});

web worker

Array.prototype.reduce.call(
  document.querySelector('table').rows,
  (acc, n) => {
    if (!n.classList.contains('no')) {
      acc[acc.length - 1].info.push({
        subtitle: n.querySelector('th').textContent,
        cell: n.querySelector('td').textContent,
      });
    } else if (!n.querySelector('.no2')) {
      acc.push({
        title: n.querySelector('.car').textContent,
        info: [],
      });
    }

    return acc;
  },
  []
)

Есть такая штука - массив называется. Попробуйте как-нибудь.

const dropzone = event.currentTarget;

dropzone.insertBefore(draggableElement, event.target.closest('tr').nextSibling);

https://jsfiddle.net/ca2t9vzg/

попытался решить все через рекурсию

Рекурсией конечно можно:

const createTree = (data, idKey, parentKey, parentId) =>
  data.reduce((acc, n) => (parentId === n[parentKey] && acc.push({
    ...n,
    children: createTree(data, idKey, parentKey, n[idKey]),
  }), acc), []);


const tree = createTree(data, 'id', 'parentId', null);

Но вовсе не обязательно:

function createTree(data, idKey, parentKey) {
  const tree = Object.fromEntries(data.map(n => [ n[idKey], { ...n, children: [] } ]));

  return Object
    .values(tree)
    .filter(n => !(tree[n[parentKey]] && tree[n[parentKey]].children.push(n)));
}


const tree = createTree(data, 'id', 'parentId');

Экранируйте скобку: text = '\\('.

закрывающий тэг - на самом деле не закрывающий

Intersection Observer

например

array.reduceRight((acc, n) => ({ ...n, children: [ ...n.children, acc ] }), { ...obj })

Сначала группируете данные:

const grouped = Object.entries(list.reduce((acc, n) => (
  (acc[n.part] = acc[n.part] || []).push(n.title),
  acc
), {}));

Потом можно html собрать:

document.body.insertAdjacentHTML('beforeend', grouped
  .map(([ k, v ]) => `<div>${k}</div>${v.map(n => `<div>${n}</div>`).join('')}`)
  .join('')
);

Или создать элементы напрямую:

document.body.append(...grouped.flat(2).map(n => {
  const div = document.createElement('div');
  div.innerText = n;
  return div;
}));

Сложите в массив идентификаторы элементов, которые надо скрыть: const ids = [ 10, 13, 15 ];.

Дальше есть варианты:

$(ids.map(n => `[data-property-id-row="${n}"]`).join(', ')).hide();

или

const elems = document.querySelectorAll(ids.map(n => `[data-property-id-row="${n}"]`));
for (let i = 0; i < elems.length; i++) {
  elems[i].style.display = 'none';
}

или

document.querySelectorAll('.form-group').forEach(function(n) {
  n.hidden = this.has(Number(n.getAttribute('data-property-id-row')));
}, new Set(ids));

или

.hidden {
  display: none;
}

for (const n of document.getElementsByClassName('form-group')) {
  n.classList.toggle('hidden', ids.includes(+n.dataset.propertyIdRow));
}

Всё срабатывает. Но вот из-за

$("#changeCityInput").bind("keyup change",

выпадающий список строится повторно: при клике на пункт списка после редактирования инпута последний теряет фокус, в результате возникает событие change.

Слушайте событие input:

$('#changeCityInput').on('input',

const getNestedData = (data, condition) => Object
  .values(data instanceof Object ? data : {})
  .reduce((acc, n) => (
    acc.push(...getNestedData(n, condition)),
    acc
  ), condition(data) ? [ data ] : []);


const objects = getNestedData(data, x => x && x.value > 0);

const checked = Array.from(document.querySelectorAll('.btn:checked'), n => n.value);
const filtered = arr.filter(n => checked.includes(n));