Даёшь DOM API. В общем сделал то решение до конца, которое без библиотек https://codepen.io/Malleys/pen/RmqRPa?editors=0010

Даёшь jQuery. Так покажите адекватное решение на jQuery! Вы много написали, но решения ещё не видно!

Так вот покажите, как правильно! Почему вы решили, что единственно истинное решение будет с использованием jQuery?

Вот некоторые решения:

• jQuery ждём решение от laimas
• DOM API https://codepen.io/Malleys/pen/RmqRPa?editors=0010
• React.js https://codepen.io/Malleys/pen/BeGBVL?editors=0010

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

Те, кто только начинают изучать JavaScript, могут быть введены в заблуждение и считать, что jQuery является самой сутью JavaScript. Однако это не соответствует действительности, а сутью JavaScript является его ядро, которое описано в спецификации EcmaScript. Такое ядро поддерживается любой платформой, которая предназначена для работы с JavaScript. Это может быть браузер Google Chrome, программа node.js, оболочка для создания десктопных приложении Electron и мобильных приложении Cordova и пр. А jQuery является функцией, написанной для манипуляции DOM, т. е. она бессмысленна там, где нет такой модели!

Стоит однако отметить, что эта функция была очень полезна, когда вам нужно было, чтобы ваша программа работала и в IE тоже. Правда вместо того, чтобы предложить реализацию отсутствующих методов и функции в старых браузерах, jQuery была написана как нечто обособленное от DOM API, что привнесло однородность и путаницу в написании кода 13 лет назад, и совершенно не нужно сегодня, поскольку усложняет работу с Shadow DOM API, с наследованием (оно работает с багами), имеет свой собственный синтаксис селекторов, несовместимый со стандартом (вам придётся запутаться между двумя: jquery legacy и css, который работает, как в стилях, так и в DOM API), устаревшие методы jQuery (сегодня DOM API стандартизировано и работает одинаково во всех современных браузерах, во всяком случае вам придётся использовать новый функционал без jQuery, потому что он не поддерживает его!)

Если вам нужна поддержка старых браузеров, то вы по прежнему можете писать стандартный и понятный код, подключив Polyfill Service.