Alfieros

Разве мы можем использовать скрипт до того, как добавили его в HTML-документ

Так а где там использование скрипта до того как он загрузился?

1) функция loadScript принимает на вход 2 аргумента - адрес для скрипта(src) и функцию, которая выполнится после загрузки скрипта из указанного адреса(callback).
2) Функция loadScript создаёт элемент скрипт, в src которого передаёт одноимённый аргумент. Таким образом, происходит загрузка скрипта браузером.
3) Задаётся обработчик события onload - то есть когда скрипт загрузится нужно выполнить колбэк - второй аргумент функции. В данном примере это 2 алерта.
4) т.к. событие onload неизвестно когда произойдёт (оно асинхронное) то выполняется следующая строчка - добавление скрипта в шапку.
5) Скрипт загрузился, выполнился коллбэк. Т.к. скрипт уже в шапке - доступна функция лодаша.

Вариант без использования :has

let str4 = 'a_baba_galamaga_tvoe_korito_est_nesti';
let a4_from = 'k';
let a4_to = 't';

const f4 = (str, a, b) => {
  let strNew = str4.split('_');
  let res = strNew.find((word,index,arr) => {
    if (
      word.indexOf(a) !== -1 && 
      word.indexOf(b) !== -1 &&
      word.indexOf(b) - word.indexOf(a) > 0
    ){
      return true;
    }
  });
  document.querySelector('.out-4').innerHTML = (res !== undefined)
    ? res.slice(res.indexOf(a) + 1, res.indexOf(b))
    : `undefined`;
}

f4(str4, a4_from, a4_to);

Это значит, что есть элемент, ширина которого больше ширины экрана. Последовательно отключайте теги, чтобы найти проблему. А потом работайте со свойствами элемента, который не вписывается в экран.
Скорее всего дело в шапке или подвале.

Может сначала прочитаете теорию?
https://developer.mozilla.org/ru/docs/Web/CSS/bottom

const s = `login password a=23 b=73 c=3
login password a=23 b=3
login password a=73 c=3
login password b=23 c=73`;
const iterator = s.matchAll(/(?<=login password )(a=(?<a>\d+) ?)?(b=(?<b>\d+) ?)?(c=(?<c>\d+) ?)?/g);
[...iterator].forEach(match => console.log(match.groups));

Result:

{a: "23", b: "73", c: "3"}
{a: "23", b: "3", c: undefined}
{a: "73", b: undefined, c: "3"}
{a: undefined, b: "23", c: "73"}

Или проще без регулярок: взять подстроку после префикса — "a=23 b=73 c=3", разбить по пробелам, потом каждый элемент разбить по знаку = на ключ и значение.

const selectors = [ '.addservice', '.addprice' ];
const data = Array.from(
  document.querySelectorAll('.addserviceBlock'),
  n => selectors.map(m => n.querySelector(m).value)
);

Готового такого примера нет, но примерно так:

.logo {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}

В селекторе можно использовать любые атрибуты элементов.

// или перечисляем через запятую
$('[name=test1], [name=test2], [name=test3]').on('input', function(){
	console.log($(this).val());
});
// или таким образом
$('[name^=test]').on('input', function(){
	console.log($(this).val());
});

Есть вариант отталкиваться от родительского элемента. В вашем случае < div > не унифицирован, но если предположить, что он единственный на странице, то подошёл бы и такой вариант:

$('div input:not([name=stop1])').on('input', function(){
	console.log($(this).val());
});