I struggle with the issue of clearing the text input field when new line is added on click button. When I add number to input field and click on + button I want the added number in first line stays in input field but instead it clears. The solution is maybe very easy but as I am learning javascript right now I cannot find the reason why the field delete my inputs. Here is my code:

function Item(data) { 

Object.assign(this, data)

this.getItemHtml = function () {
    const {itemNo, quantity} = this;

    return `
        <ul class="grid list-item">
            <li class="col-1">${this.itemNo++}</li>
            <li class="col-2"><input type="number" id="item-qty${itemNo}" required></li>
        </ul>
    `;
}}

const itemNo = new Item(iItem.itemData)

function render() { document.getElementById("i-list").innerHTML += itemNo.getItemHtml() }

function addItem() { render() getInput() updateHtmlValue() }

document.getElementById("add-item").addEventListener("click", addItem)

function getInput() { var el = document.querySelector("ul li:nth-child(2) input") 
 if (el) {
    el.addEventListener("change", function (event) {
        let inputValue = event.target.value;

        if (inputValue < 0) {
            inputValue = 0
        }
        
        localStorage.setItem("inputValue", inputValue)
    })
 }

}

function updateHtmlValue() { var input = localStorage.getItem("inputValue") }