The text in the input is not saved?

Question

JavaScript

I can’t understand how, when entering new text into the input, what would it be saved when clicking on save_buttons

<script>
            let edit_buttons = document.querySelectorAll(".edit-btn");
            let save_buttons = document.querySelectorAll(".save-btn");
            let cancel_buttons = document.querySelectorAll(".cancel-btn");

            for (let i = 0; i < edit_buttons.length; i++) {
                let inputValue = edit_buttons[i].previousElementSibling.innerText;
                 

                edit_buttons[i].addEventListener("click", () => {                   
                    edit_buttons[i].previousElementSibling.innerHTML = `<input type="text" value="${inputValue}">`;
                    save_buttons[i].hidden = false;
                    cancel_buttons[i].hidden = false;
                    edit_buttons[i].hidden = true;               
                });
                save_buttons[i].addEventListener("click", () => {                   
                    edit_buttons[i].hidden = true;
                    
                    save_buttons[i].hidden = true;
                    cancel_buttons[i].hidden = false;
            })
            cancel_buttons[i].addEventListener("click", () => {                   
                    edit_buttons[i].hidden = false;
                    edit_buttons[i].previousElementSibling.innerHTML = inputValue;
                    save_buttons[i].hidden = true;
                    cancel_buttons[i].hidden = true;
            })
            };

    </script>

Answer 1

Throw everything away, set the contenteditable attribute.
Features:
Works in all browsers of this millennium (including IE 5.5, yes, yes!).
Saves changes automatically.
Customizable styles!
Supports ctrl+z, ctrl+v and other features of a familiar text editor!

You can, of course, show buttons like "edit, save" on hover, but it's not very clear why.