Проблемы с вводом в javascript

Это не работает, так как вы устанавливаете весь контент в теге <button>.

Вы действительно можете проверить это, нажмите и нажмите ввод. Когда вы нажимаете, вы можете вводить текст в элемент ввода. Но когда вы отпускаете, все очищается. Вы не можете получить кнопку редактирования, так как кнопка onClickListener активна на переднем плане.

Простое решение — очистить весь контент, а затем добавить html в <div>.

...
if (idButtonPassword = '#password-changer') {
                $(e.currentTarget).parent().empty() // <- modified line
               .html(`<div class = "left-column">
                   <div class = "imput-wrapper top">
                     <div class = "imput-title">
...

Вы можете проверить JSFiddleDemo здесь

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

Поэтому, если вы нажмете на что-нибудь внутри #password-changer (div), сигнал будет распространяться, и вы замените все внутренности div новым вводом.

Если я правильно понимаю проблему, это решение:

let liberatePasswordButtonClickHandler = e => {
    e.preventDefault()
    $('#password-changer').html(`
        <div class = "left-column">
        <div class = "imput-wrapper top">
            <div class = "imput-title">
                <span><strong>New passoword</strong></span>
            </div>
            <input type = "password" placeholder = "New passoword here"/>
        </div>
        <div class = "imput-wrapper">
            <div class = "imput-title">
                <span><strong>Re-enter new password</strong></span>
            </div>
            <input type = "password" placeholder = "Re-enter new password here"/>
        </div>
      </div>`);
};
$(document).on('click', '#password-changer .button-edit', liberatePasswordButtonClickHandler)

Объяснение:

• $(document).on('click', '#password-changer .button-edit', liberatePasswordButtonClickHandler) применяет функцию liberatePasswordButtonClickHandler каждый раз, когда щелкают класс button-edit внутри контейнера с идентификатором password-changer
• $('#password-changer').html(...) просто заменяет внутренности родительского div (это просто, потому что у него есть идентификатор)

Если вы хотите сделать это более общим, вы можете:

• измените #password-changer на .password-changer, чтобы ссылаться на класс вместо идентификатора
• Затем внутри при замене вашего html сделайте что-то вроде $(e.target).parents('.password-changer').first().html(...) (это получит ближайшего родителя с классом password-changer)