Андрей

После этой строки $(this).removeClass("error"); надо добавить $(".red").remove();

Правда если класс .red еще каким-либо элементам присваивается, то они тоже удалятся... Так-что в таком случае какое-то более специфическое название классу надо придумать вместо .red

В контроллере отвечающем за обработку AJAX-запросов что-то вроде

header("Cache-Control: no-cache, must-revalidate");

Разумеется заголовки отправлять до данных.

А зачем добавлять новый элемент, если можно записать новые значение в существующий?

Профи знает и учитывает массу неявных нюансов. Чтобы накопить подобный опыт необходимо годы годские плотно заниматься профессией на серьезном уровне. Профи не рождаются, профи становятся.

Еще профи, кроме всего прочего, адекватно комментирует код, т.к. знает наверняка, что он не единственный, кто будет работать с кодом, и какой бы код не был прекрасный, пару слов на простом человеческом языке порой могу сэкономить очень много времени и труда...

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

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

Дилетант просто знает самый необходимый минимум чтобы завелось и взлетело. Иногда этого вполне достаточно. Если дилетант умный и усидчивый, то он быстро вырастает в профи. Если нет, то на нет и суда нет...

Посмотрел бегло и не смог найти .modal-backdrop, ни в коде, ни в DOM... Может потому и не срабатывает?

Вообще что имеется в виду под спец.областью .modal-backdrop ?

Патч решающий данную проблему там: codepen.io/anon/pen/LGBPyv

Ни к чему городить такой огород.

Задавать обработчик внутри тега не совсем кошерно с точки зрения гибкости и разделения логики и представления.

Убираем строку декларации функции function changeValue(){ и закрывающую скобку в конце блока кода }

Из инпута убираем onclick="changeValue()"

Декларацию обработчика клика $('.moreless').click(function() { переписываем на современный лад
$(document).on('click', '.moreless', function() { ... } );
данный подход универсален и работает даже если HTML добавляется на страницу динамически после инициализации обработчика события.