Антон Волков

Варианта 2
либо использовать шрифты у которых есть поддержка символов нужных языков
либо, в зависимости от языка, менять шрифт на другой с поддержкой нужных символов

форма action которая ведет на файл php

1) Если вы уберете "файл php" из экшна, фрома будет субмититься на текущий урл, что как раз будет давать вам перезагрузку. Естественно код отправки данных на емэйл тоже надо будет расположить в текущем скрипте.
2) Отправляйте данные аяксом через яваскрипт, после чего перегружайте страницу из яваскрипта.

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

Пиши php туда же где и форма, action оставь пустым. Или в скрипте пропиши в конце header("Location: /*ваш урл куда скрипт должен перенаправить*/")

просто используй JS

var selectedText  =  $( "#myselect option:selected" ).text();  //  вот так ты получаешь текст из селекта.

общая идея : на событие изменения выбранного значения в селекте

$('body').on('change', "#myselect" , function(){
$("#hiddenField").val($( "#myselect option:selected" ).text());
});

ты получаешь новое текстовое значение и добавляешь его в скрытое поле формы, которое потом отправишь на сервер. Далее легко получаешь его в .$_POST['hiddenField'] на сервере.

Например: codepen

Абсолютным позиционированием
К примеру имеем Родительский Блок с изображением он имеет относительное позиционирование,
И имеем вложенный блок который расположен абсолютно т.е top:0; left:0; и имеет ширину и высоту в 100% внутри содержимое можно располагать как угодно

<script>
var list1=['1.jpg','2.jpg'];
var list2=['3.jpg','4.jpg'];
</script>

<button onclick="fillDiv(list1);">1,2</button><button onclick="fillDiv(list2);">3,4</button>
<div id="e4gallery"></div>

<script>


function fillDiv(list)
{
var imgDiv=document.getElementById("e4gallery");
imgDiv.innerHTML = '';
	list.forEach(function(item,i,list){
	var newDiv=document.createElement('div');
	newDiv.className='e4pictceClass';
	var image  = document.createElement('img');
	image.src=item;
	newDiv.append(image);
	
	imgDiv.append(newDiv);
	});
	
}
</script>

::-webkit-scrollbar {
	width: 10px;
	background-color: rgba(0, 0, 0, 0);
	border-radius: 100px;
}

::-webkit-scrollbar:hover {
	background-color: rgba(0, 0, 0, 0.09);
}

::-webkit-scrollbar-thumb:vertical {
	background: rgba(0, 0, 0, 0.5);
	border-radius: 100px;
	background-clip: padding-box;
	border: 2px solid rgba(0, 0, 0, 0);
	min-height: 10px;
}

::-webkit-scrollbar-thumb:vertical:active {
	background: rgba(0, 0, 0, 0.61);
	border-radius: 100px;
}

1. Храните шрифты во всех нужных форматах (woff, woff2 итд)
2. Используйте шрифты в которых есть символы для всех нужных языков.
Неплохим вариантом может быть использование Google Fonts

send.addEventListener('click' , function () {
  var saving = Number(document.getElementById('saving').innerText);
  var saving2 = Number(document.getElementById('saving2').innerText);
  document.getElementById('sendOTVET').innerHTML = saving2 - saving;
});

Ваша проблема в том, что в Вашем коде вы получаете значение один раз - при старте кода.
А здесь вы получаете значения в текущий момент исполнения программы.
P. S. А ещё, не пишите, так:
clicker.addEventListener('mousedown' , a);
Пишите так:

document.getElementById("clicker").addEventListener('mousedown' , a);

Так будет правильнее.

Почитайте про замыкания и обработчики

send.addEventListener('click' , function () {
    var saving = Number(document.getElementById('saving').innerText);
    var saving2 = Number(document.getElementById('saving2').innerText);
    document.getElementById('sendOTVET').innerHTML = saving2 - saving;
  });

В момент клика по send блоки saving и saving2 имеют начальное значение, т.к. были сохранены при первом и единственном проходе по телу скрипта