ProjectSoft

.accordion-item .accordion-collapse {
	position: relative;
	z-index: 1;
}
@media(min-width: 768px) {
	.accordion-item:nth-child(3n+1) .accordion-collapse {
		margin-right: -200%;
	}
	.accordion-item:nth-child(3n+2) .accordion-collapse {
		margin-right: -100%;
		margin-left: -100%;
	}
	.accordion-item:nth-child(3n+3) .accordion-collapse {
		margin-left: -200%;
	}
}

Ну а дальше стилизуешь сам с бордерами.

Всё очень просто

<div class="table-wrapper">
  <div class="table">
    <div class="col indigo">
      <div class="item">Item</div>
      <div class="item">Item</div>
      <div class="item">Item</div>
      <div class="item">Item</div>
    </div>
    <!-- your code table --->
  </div>
</div>

/**
** your code css
**/
.col:first-child {
  position: sticky;
  z-index: 5;
  left: 0;
}
.table-wrapper {
  max-width: 100%;
  overflow-y: hidden;
  overflow-x: auto;
}

И не важно, что именно будет: блоками, таблицей... -- принцип тот же.

div:before {
	content: "Перенос\000A\000DСТРОК В BEFORE\000A\000DПеренос\000A\000DСТРОК В BEFORE";
	white-space: pre;
	display: inline-block;
}

Без JS, но SVG


JS для обратной анимации

А почему на radio событие onkeyup?
Самое удобное событие onchange.

if(!isMobile || (isMobile && needMobile === "yes")) {

Что за фигня?))
Т. е. если не мобильный или если мобильный плюс переменная равна чему-то там...
Это условие означает - всегда внизу!
Попробуйте так
if(isMobile && needMobile === "yes") {

border применяйте к псевдоэлементу before, а не к самой кнопке

function onAjaxSuccess(data)
{
	var doc = $(data);
	console.log($("body", doc).html());
}

Файл dooplay/inc/dt_assets.php функция dooplay_scripts_footer

Либо чуть ниже

<meta content="width=device-width, initial-scale=1" name="viewport">

Если для вопроса Как реализовать появление блока относительно нажатой кнопки?
jsfiddle.net/nbz27sjL
Т. е. Мы показываем инпут, чтобы скрипт datepicker просчитал его позицию и тут же скрываем.

Берёте отдельный див и на него вешает background данной картинки.
td - position relative
для div c background - position absolute; width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; z-index: 0. Применяете blur для данного div.

<td class="td" rowspan="4" width="20%">
	<div class="bg"style="filter: blur(px);background-image: url('https://image.gametracker.com/images/maps/160x120/cs/de_dust2_2x2.jpg');box-shadow:         inset 0px 0px 10px 0px rgba(50, 50, 50, 0.75);"></div>
	<div class="addon-installed" style="-webkit-box-shadow: 3px 2px 5px 0px rgba(31, 31, 31, 0.6);-moz-box-shadow: 3px 2px 5px 0px rgba(31, 31, 31, 0.6);box-shadow: 3px 2px 5px 0px rgba(31, 31, 31, 0.6);padding-right: 5px;width: max-content;margin-right: -2px;margin-top: -63px;text-align: center;">Сервер выключен =(</div>
</td>

.td {
  position: relative;
}
.bg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left:0px;
  right: 0px;
  bottom: 0px;
  z-index: 0;
}
.addon-installed {
  z-index: 1;
  position: relative;
}

И перенесите все инлайновые стили в css файл.

Используйте регулярку
https://regex101.com/r/WG5LYZ/1/
И обрабатывайте результат в нужный вам формат

https://html5book.ru/css3-columns/

Настройте MIME типы на сервере.

Для начало попробуйте через .htaccess

AddType font/ttf 				.ttf
AddType font/eot 				.eot
AddType font/otf 				.otf
AddType x-font/woff 				.woff
AddType font/woff2 				.woff2

Если Content-type не изменится и вы не можете самостоятельно настроить заголовки для типов файлов - обратитесь в тех. поддержку Jino

Как должно быть

Ещё вариант
jsfiddle.net/x5j1b9cm

Как такового события нет у input.

https://codepen.io/anon/pen/BVbdOz
Оно?

Док: https://pugjs.org/language/iteration.html

Сразу со второго вопроса.
Как вариант. Но для каждого брекпоинта (@media) писать нужные (иные) условия, если требуется для адаптации
jsfiddle.net/mo5Ljkf2

По первому вопросу проблем вообще не вижу. Стандартная вёрстка.
А дизайнеру за центрирование по жопе надавать )))

Не известно что и как у вас по логике вёрстки, форм, etc.
Поэтому пример только для сбора всех заполненных input файлов.
Используем FormData

<!DOCTUPE HTML>
<html>
	<head>
		<title>Test</title>
	</head>
	<body>
		<input type="file"><br>
		<input type="file"><br>
		<input type="file"><br>
		<input type="file"><br>
		<input type="file"><br>
		<input type="file"><br>
		<input type="file"><br>
		<button id="click">Test</button>
		<script>
			var btn =document.getElementById('click');
			click.addEventListener('click', function(e){
				var files = document.querySelectorAll('input[type="file"]'),
					fd = new FormData();
				if(files){
					files.forEach(function(input, index, list){
						if(input.files.length){
							fd.append("filesUpload[]",input.files[0]);
						}
					});
				}
				// вывод для теста
				console.log(fd.getAll('filesUpload[]'));
				// Отправляем ajax
				// Повесить обработчики отправки!!!!
				var request = new XMLHttpRequest();
				request.open("POST", "http://localhost/submitform.php");
				request.send(fd);
			});
		</script>
	</body>
</html>