Алексей Уколов

Единственное правило — текст должен быть достаточно контрастным, чтобы не приходилось напрягать зрение при чтении.

Цвет прелоадера зависит вот от этого правила:

#spinner:before {
    border-top-color: #e1472f;
    border-left-color: #e1472f;
    border-right-color: #e1472f;
}

P.S. Через js вы его не сможете установить, потому что :before - это ShadowDOM, а вот через css вполне.

:nth-last-child(-n+4)

Эту задачу вполне может решить strip_tags() (пример), а вот регулярные выражения подходят для неё как раз очень плохо.

Дубль два: getCurrentPosition() и getJSON() — асинхронные методы.
$('.section').html(html); выполняется до того, как получен ответ от сервера. Этот ответ, соответственно, просто игнорируется. Как решить проблему я вам написал в прошлом вопросе.

Пробел перед ORDER, сейчас id к нему прилипает при конкатенации.

Метод navigator.geolocation.getCurrentPosition() является асинхронным. Это значит, что в момент заполнения html значения ещё могут быть не получены. Должно быть так:

$(document).ready(function() {
  setLocation();  
});

function setLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      $('.section').html('<p>Latitude: ' + position.coords.latitude; + '</p><br><p>Longitude: ' + position.coords.longitude + '</p>');
    });
  };
}

Метод get() возвращает коллекцию объектов, с которой вы пытаетесь работать как с единственным объектом (об этом вам в ошибке и пишут).
Если у вас заведомо один объект, нужно делать так:

return OptionsModel::where('option', $name)->first();

Можно. Читайте документацию, там написано какой параметр за это отвечает и как им пользоваться.

Как в адресной строке можно прописать запрос post, чтобы из нее в БД добавить данные?

Никак.

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

Редиректить на другую страницу после сохранения, чтобы перезагружать было нечего. Это стандартная практика.

Кастомизация шаблона

const maxId = arr.reduce((max, item) => item.id > max ? item.id : max, 0);

Из вопроса непонятно, какое число должно быть минимальным.
Если нужно ровно четыре, то так:
/^[0-9]{4}$/
или так :)
/^\d\d\d\d$/

Если нужно от X до четырёх:
/^[0-9]{X,4}$/

Потому что переменные между методами не передаются.
Если хотите что-то переиспользовать, нужно сохранять это в параметры объекта:
$this->connection = ...

Вы сейчас на каждой итерации перезаписываете содержимое. Нужно добавлять:

document.getElementsByClassName('rez')[0].innerHTML += rez;

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

document.getElementsByClassName('rez')[0].innerHTML = '';

P.S. Если вам не нужно поддерживать уж совсем древние браузеры, то проще искать элемент так:
document.querySelector('.rez').innerHTML = '';

Можно ли связать role_id и id если эти названия не совпадают?

Можно, название колонок никакой роли не играет. А вот их тип должен быть полностью идентичным.