lUser L

После прохождения теста, элемент с id question или quiz удаляется (смотри на строку 39)
При попытки начать тест снова выдает ошибку, так как этих элементов нет и они не создаются.

Как решить думаю очевидно

*UPD решение - https://jsfiddle.net/k1awft4x/

DEMO - не знаю, что вы задумали, но сделал так. Раз, вы используете jq, то используйте делегирование, что бы обратиться к элементам, которые добавлены динамически.
Например от родителя - body

$('body').on('click', '.btn', function(){
});

ALTER TABLE table_id AUTO_INCREMENT = 1;

У вас переменная result1 объявлена внутри функции, и по этому тут

document.getElementById("button1").onclick = function(){
    if(result.style.color = "black"){
        result1.style.Color = "red";  
    }
    //result1.style.Color = "blue";
}

Выдает ошибку.
Область видимости
решение

https://codepen.io/5h4dy_s/pen/zYKGOzv - вот, как пример набросал за 3 минут пока пил чай

https://codepen.io/5h4dy_s/pen/ZEOMBoX

В php есть функция nl2br, которая ставить теги br
В js такой функции нет, но есть кастомная функция, регулярка, которая делает почти тоже самое.


Источник

https://codepen.io/5h4dy_s/pen/XWKBOvx?editors=1011

Использовать $(this) .parent() .child() .after() .before(). Не имеет смысла так как если я изменю положение элементов в var html то все придется переделывать.

Не придётся, если изначально задать этим элементам родитель и ссылаться на него через closest('.parent');

И как сохранить в textarea весь html код так что бы при воспроизведении его js все еще работал.

- не понял

- У вас структура таблицы не правильная
- обратные кавычки`` позволяют разделять строку на части. следовательно можешь писать хтмл без тысячи append, и использовать переменные без конкатенации: ${tut_peremennaya}
https://codepen.io/5h4dy_s/pen/KKMeZdK?editors=1010

Добавить padding ?

.input {
   padding-left: 10px;
}

Задайте z-index блоку выше чем у картинки

#menuVertical ul li {
    z-index: 10;
}

.input {
    box-sizing: border-box;
}

clip path например

Так ты тег <а></a> добавляешь и потому юзаешь .val(), что должно было произойти ?

У тега <a></a> нет value

$( ".el" ).click(function() - используется для элементов, которые были загружены и видны для jq вовремя загрузки страницы
а для элементов , которые были добавлены после нужно юзать так: $( "body" ).on('click', '.test', function() (не обязательно от body, можно от родителя в твоем случае .directory)

https://codepen.io/5h4dy_s/pen/RwaeMOd

$( "body" ).on('click', '.test', function() {
  var id = $(this).attr('id');
  alert(id);
});



$( ".run" ).click(function() {
	$(".directory").append('<a class="test" id="my_id" href="#">text</a>');
});

Не совсем понятно, но так к слову, потратил 5 минут на то что бы понять суть вопроса в итоге ничего не понял и поэтому предложу это, что бы хоть что-то чем ничего :)

без цикла

$arr = array(1, 2, 3, 4, 5);
echo array_sum($arr);

В твоем случае: https://codepen.io/5h4dy_s/pen/OJNwLaY

&:focus~.form__input-text,
  &:not(:placeholder-shown) + .form__input-text{
		-webkit-transform: translateY(0);
		-ms-transform: translateY(0);
		transform: translateY(0);
		top: 10px;
		left: 17px;
		font-size: 10px;
		line-height: 12px;
		color: #BABABA;
		transition: all 0.3s ease;
	}

Оберни их в conatiner и флекси его
https://codepen.io/5h4dy_s/pen/BaKRrWK

.block {
  width: 254px;
  height: 488px;
  border: 1px solid #000;
  background: linear-gradient(117deg, black 42%, transparent 0);
}

https://jsfiddle.net/ypwhqxrt/