Изменить на input по двойному клику
 

Здравствуйте, форумчане! Столкнулся с проблемой: Необходимо отрисовать карточку, редактируемую по двойному клику. На карточке 6 компонентов:
1. Число (скрытый компонент)
2. Текст (компонент - расширенное текстовое поле)
3. Пароль (компонент пароля)
4. Число (компонент - текстовый документ)
5. Логическое (checkbox)
6. Логическое (checkbox)
Необходимо сформировать механизм изменения данных в полях. При загрузке страницу,
карточка процедурой подгружается из массива. По двойному щелчку
мыши на карточку, она переходит в режим редактирования, в котором можно
изменить все поля. По кнопке сохранить – изменения применяются, по кнопке отмена - карточка приходит в изначальное состояние.
Собственно, вопрос: Есть <div>, который будет карточкой, внутри которого находятся компоненты. Как организовать редактирование всех полей по двойному клику на карточку?
Заранее спасибо, очень важно для меня

Ну если этот текст имеет признаки, по которым можно их поместить в соответствующие поля, то добавлять поля/удалять поля, сохраняя или нет при этом измененный текст, это все что потребуется делать.