Пашенька

document.getElementByID("btn").onclick = click; // ссылка на функцию, а не вызов

id 2 - Свинина (Пункт)
parent_id 2 - Живойвес (Подпункт)
parent_id 3 - Мелковес (Подпункт 3-го уровня)

Не уверен, что это правильно. Вернее уверен, что ты неправильно это понимаешь: parent_id 2 это подпункт для меню итема с id 2, а не второго уровня(в данном случае он второго уровня, но это просто совпадение). parent_id 3 это подпункт для меню итема с id 3, а не третьего уровня. У тебя же там не будет меню вложенностью в 16 пунктов, верно?)

Напиши ответ из базы, джейсон или что там будет, тогда накидаю вывод разметки.

Update. Держи:

let ul = '<ul>';

for (let i = 0; i < arr.length; i++) {
  let item = arr[i];
  ul += '<li>' + item.title + '</li>';
  
  for (let j = 0; j < item.children.length; j++) {
    let child = item.children[j];
    if (j === 0) {
      ul += '<ul>';
    }
    ul += '<li>' + child.title + '</li>';
    
    
    if (child.children) {
      for (let k = 0; k < child.children.length; k++) {
        let child2 = child.children[k];
        if (k === 0) {
          ul += '<ul>';
        }
        ul += '<li>' + child2.title + '</li>';
        
        
        if (child2.children) {
          for (let n = 0; n < child2.children.length; n++) {
            let child3 = child2.children[n];
            if (n === 0) {
              ul += '<ul>';
            }
            ul += '<li>' + child3.title + '</li>';

            if (n === child2.children.length - 1) {
              ul += '</ul>';
            }
          }
        }
      

        if (k === child.children.length - 1) {
          ul += '</ul>';
        }
      }
    }
       
    
    if (j === item.children.length - 1) {
      ul += '</ul>';
    }
  }
  
}
ul += '</ul>';
document.body.innerHTML = ul;

Проверяй уже сам, всё ли правильно.

1. Нажимаешь поиск
2. Включаешь прелоадер
3. Ждёшь ответа, как соловей лета
4. По пришествию хорошего/плохого ответа, выключаешь прелоадер
5. Странно, что это нужно объяснять.

Конечно можно.

$(document.body).on("mousemove", function(event) {
      if ($dragging) {
          var left = $('#panor-move').css('left')
          left = parseFloat(left);
          var leftPos = event.pageX > 370 ? 370 : event.pageX < 10 ? 10 : event.pageX;
          $dragging.offset({
              left: leftPos
          });
          
      }
  });


  $(document.body).on("mousedown", "#panor-move", function (event) {
      $dragging = $(event.target);
  });

  $(document.body).on("mouseup", function (event) {
      $dragging = null;
  });

.reset() сбрасывает форму, поскольку у вас не форма, то незачем и пытаться его прикрутить.
Отметил + изменения. Я не стал их впихивать в метод, сами воткнёте куда надо.

'use strict';
let start = document.getElementById('start'), 
    cancel = document.getElementById('cancel'),
    btnPlus = document.getElementsByTagName('button'), 
    incomePlus = btnPlus[0],
    expensesPlus = btnPlus[1], 
    depositCheck = document.querySelector('#deposit-check'), 
    additionalIncomeItem = document.querySelectorAll('.additional_income-item'), 
    budgetDayValue = document.getElementsByClassName('budget_day-value')[0],
    budgetMonthValue = document.getElementsByClassName('budget_month-value')[0],
    expensesMonthValue = document.getElementsByClassName('expenses_month-value')[0],
    accumulatedMonthValue = document.getElementsByClassName('accumulated_month-value')[0],
    additionalIncomeValue = document.getElementsByClassName('additional_income-value')[0],
    additionalExpensesValue = document.getElementsByClassName('additional_expenses-value')[0],
    incomePeriodValue = document.getElementsByClassName('income_period-value')[0],
    targetMonthValue = document.getElementsByClassName('target_month-value')[0],
    salaryAmount = document.querySelector('.salary-amount'),
    incomeTitle = document.querySelector('.income-title'),
    expensesTitle = document.querySelector('.expenses-title'),
    expensesItems = document.querySelectorAll('.expenses-items'),
    additionalExpenses = document.querySelector('.additional_expenses'),
    additionalExpensesItem = document.querySelector('.additional_expenses-item'),
    periodSelect = document.querySelector('.period-select'),
    periodAmount = document.querySelector('.period-amount'),
    targetAmount = document.querySelector('.target-amount'),
    incomeItems = document.querySelectorAll('.income-items'),
    main = document.querySelector('.main'); // +
         

let appData = {
    budget: 0,
    budgetDay: 0,
    budgetMonth: 0,
    income: {},
    incomeMonth: 0,
    addIncome: [],
    expenses: {},
    expensesMonth: 0,
    addExpenses: [],
    deposit: false,
    persentDeposit: 0,
    momeyDeposit: 0,
    start: function(){

        appData.budget = +salaryAmount.value;
        
        appData.getExpenses();
        appData.getIncome();
        appData.getExpensesMonth();
        appData.getIncomeMonth();
        appData.getAddExpenses();
        appData.getAddIncome();
        appData.getBudget();
        appData.changeRange();
        appData.blocking();

        appData.showResult();

        

    },
    activBtn: function() {
        if (salaryAmount.value !== '') {
            start.removeAttribute('disabled');
            //start.disablede('disabled');
        }
      },

   

    showResult:function(){
        budgetMonthValue.value = appData.budgetMonth;
        budgetDayValue.value = Math.ceil(appData.budgetDay);
        expensesMonthValue.value = appData.expensesMonth;
        additionalExpensesValue.value = appData.addExpenses.join(', ');
        additionalIncomeValue.value = appData.addIncome.join(', ');
        targetMonthValue.value = Math.ceil(appData.getTargetMonth()); //округление в большую сторону
        periodSelect.addEventListener('change', function(){
            incomePeriodValue.value = appData.calcPeriod();
        });

    }, 

    blocking: function(){
        document.querySelectorAll('input[type=text]').forEach(function(item){
            item.disabled = true;
        });
        start.style.display = 'none';
        cancel.style.display = 'block';
    },

    addExpensesBlock: function(){
        let cloneExpensesItem = expensesItems[0].cloneNode(true);
        expensesItems[0].parentNode.insertBefore(cloneExpensesItem, expensesPlus);
        expensesItems = document.querySelectorAll('.expenses-items');
        if(expensesItems.length === 3){
            expensesPlus.style.display = 'none';
        }
    },
    addIncomeBlock: function(){
        let cloneIncomeItem = incomeItems[0].cloneNode(true);
        incomeItems[0].parentNode.insertBefore(cloneIncomeItem, incomePlus);
        incomeItems = document.querySelectorAll('.income-items');
        if(incomeItems.length === 3){
            incomePlus.style.display = 'none';
        }
    },
    getExpenses: function(){
        expensesItems.forEach(function(item){
            let itemExpenses = item.querySelector('.expenses-title').value;
            let cachExpenses = item.querySelector('.expenses-amount').value;
            if(itemExpenses !== '' && cachExpenses !== ''){
                appData.expenses[itemExpenses] = cachExpenses;
            }
        });
    },
    getIncome: function(){
        incomeItems.forEach(function(item){
            let itemIncome = item.querySelector('.income-title').value;
            let cachIncome = item.querySelector('.income-amount').value;
            if(itemIncome !== '' && cachIncome !== ''){
                appData.income[itemIncome] = cachIncome;
            }
        });


        /*if(confirm('Есть ли у Вас дополнительный источник заработка?')){
            let itemIncome = prompt('Какой?', 'Репетитор');
            let cachIncome = prompt('Сумма дополнительного дохода?', '10000');
            appData.income[itemIncome] = cachIncome;
        }
        for(let key in appData.income){
            appData.incomeMonth += +appData.income[key];
        }*/
    },
    
    changeRange: function(){
        periodAmount.textContent = periodSelect.value;
    },

    getAddExpenses: function(){
        let addExpenses = additionalExpensesItem.value.split(',');
        addExpenses.forEach(function(item){
            item = item.trim(); //убирает пробелы в начале и в конце
            if (item !== ''){
                appData.addExpenses.push(item); 
            }
        });
    },
    getAddIncome: function(){
        additionalIncomeItem.forEach(function(item){
            let itemValue = item.value.trim();
            if (itemValue !== ''){
                appData.addIncome.push(itemValue);
            }
        });
    },

    getExpensesMonth: function(){ //Сумма всех расходов за месяц
        for (let key in appData.expenses){
            appData.expensesMonth += +appData.expenses[key];
        }
    },
    getIncomeMonth: function(){ //Сумма всех расходов за месяц
        for (let key in appData.income){
            appData.incomeMonth += +appData.income[key];
        }
    },
    
    getBudget: function(){
        //Месячный бюджет (доход - сумма расходов)
        appData.budgetMonth = appData.budget + appData.incomeMonth - appData.expensesMonth;  
        //Дневной бюдже (Месячный бюджет разделенный на 30 дней)
        appData.budgetDay = appData.budgetMonth/30; 
    },

    getTargetMonth: function(){
        return targetAmount.value / appData.budgetMonth;
    },
    getStatusIncome: function(){
        if (appData.budgetDay >= 800){
            console.log('Высокий уровень дохода');
        } else if(appData.budgetDay < 800 && appData.budgetDay >= 300){
            console.log('Средний уровень дохода');
        } else if(appData.budgetDay < 300 && appData.budgetDay >= 0){
            console.log('Низкий уровень дохода');
        } else {console.log('Что-то пошло не так');
        }
    },
    calcPeriod: function(){
        return appData.budgetMonth * periodSelect.value;
    }

};

salaryAmount.addEventListener('keyup', appData.activBtn);
  
salaryAmount.addEventListener('keyup', appData.checkLength);

start.addEventListener('click', appData.start);

expensesPlus.addEventListener('click', appData.addExpensesBlock);

incomePlus.addEventListener('click', appData.addIncomeBlock);

periodSelect.addEventListener('change', appData.changeRange);

cancel.onclick = function() { // +
  var inputs = main.querySelectorAll('input');
      for (var i = 0; i < inputs.length; i++) {
        inputs[i].value = '';
      }
}

Ну изи же.

в самые нижние строки поля textarea

Если мои телепатические способности не подводят.

document.getElementById('btn').onclick = function() {
    textarea.value += '\n' + input.value; // textarea & input replace to target elements
}

Если домены сайта и айфрейма различны, то это невозможно. Б - безопасность.

Вы вешаете обработчик на кнопку, которую после клика тут же удаляете. Код внутри обработчика будет выполнен только один раз естественно. Чего вы ожидаете? Это вам не реакт и прочая лабуда. Тут нужно работать.

import "./styles.css";

const btnApp = document.querySelector("button");
const app = document.querySelector("#app");

let score = 0;
let time = 10;

btnApp.addEventListener("click", () => {
  console.log('hello, you see it only once!') // hello, you see it only once!
  btnApp.remove();

  // Create button Click
  const newBtn = document.createElement("button");
  app.insertAdjacentElement("beforeend", newBtn);
  newBtn.textContent = "Click";

  // Create score
  const newScore = document.createElement("span");
  app.insertAdjacentElement("beforeend", newScore);
  console.log('this will happen only once too!') // this will happen only once too!
  newScore.textContent = `Score: ${score}`;


  // Score++
  newBtn.addEventListener("click", () => {
    score += 1;
    newScore.textContent = `Score: ${score}`; // I added this
    console.log(score);
  });

  // Create timer
  const newTimeout = document.createElement("span");
  app.insertAdjacentElement("beforeend", newTimeout);
  console.log('this will happen only once tooooo!') // this will happen only once tooooo!
  newTimeout.textContent = `Time: ${time}`;

  timeOut();
});

function timeOut() {
  const timer = setTimeout(() => {
    if (time <= 0) {
      clearTimeout(timer);
    } else {
      time -= 1;
    }
  }, 1000);
}

П.С. удалять кнопку и вместо неё создавать новую - это жёстко.

Прелоадер, очевидно, крутится, потому что вы в JS его убираете, а JS код ещё до этого момента уже посыпался в IE11. Как вариант в самом начале JS файла проверить

function detectIE() {
    var ua = window.navigator.userAgent;
    var msie = ua.indexOf('MSIE ');

    if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./))  {
        return true;
    }

    return false;
}

if ( detectIE() ) {
    // скрыть прелоадер
    // показать некое сообщение пользователю.
}

Не сильно грузит(но сто килобайт кода(ненужного) выполнить в обозревателе - это довольно существенно) но надобность в нём давно отпала. Я как раз из тех, кто говорит, что нужно писать на нэйтиве.
Почему почти на каждом сайте жуйквери? Дело в том, что люди ленивы по своей натуре, здесь можно списать на привычку и нежелание переучиваться и переписывать свои старые творения тех, кто когда-то начал изучение фронта с джейквери. Тогда было иное время и поведение всех браузеров нужно было "приравнять", это и являлось задачей джейквери. Сейчас браузеры подтянулись (причём давно уже) и джейквери стал архаизмом.
Изучайте ванилу.

Быстрейший и предпочтительный способ приведения строки к числу:
const saltRounds = +process.env.COMPLAXITY;

Так же, как и любую другую

try {
	// your shitty code
} catch(e) {
	if (e instanceof RangeError) {
		console.warn(e);
	} else {
		console.warn('another error', e);
	}
}

Разница в том, что в первом случае вы можете установить всего один обработчик данного типа на элемент. Если попробуете таким образом "добавить" ещё один обработчик, то он просто перезапишет первый.

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

Это невозможно. Селекты - OS-зависимые и не поддаются стайлингу, кроме пары свойств. Тебе нужен self-made select