Как получить данные на форму и показать их на странице JavaScript

let products = [{
        id: 1,
        name: 'Orange',
        price: '0.5',
        image: './images/1.png'
    },
    {
        id: 2,
        name: 'Apple',
        price: '0.7',
        image: './images/2.png'
    },
    {
        id: 3,
        name: 'Banana',
        price: '1.5',
        image: './images/3.png'
    },
    {
        id: 4,
        name: 'Grapefruit',
        price: '1.7',
        image: './images/4.png'
    }
]

document.getElementsByTagName("input").value

function showCart(){
    document.querySelector('#cartBox').classList.toggle('cartShow')
}

function showProducts(){
    let productsSection = document.querySelector('#products')

    for(let product of products){
        productsSection.innerHTML += `
            <div class="product">
                <div class="product-img">
                    <img src="${product.image}">
                </div>
                <div class="product-info">
                    <h3>${product.name}</h3>
                    <a href="#" onclick="addToCart(${product.id})">Add to cart</a>
                </div>
                <p id="productPrice">${product.price} $</p>
            </div>
        `
    }
}

function addToCart(id){

    let product

    if(localStorage.getItem(`product${id}`)){
        product = JSON.parse(localStorage.getItem(`product${id}`))
        product.count++
        product.price = products[id-1]['price'] * product.count
    }else{
        product = {
            id: id,
            name: products[id-1]['name'],
            price: products[id-1]['price'],
            image: products[id-1]['image'],
            count: 1
        }
    }

    localStorage.setItem(`product${id}`, JSON.stringify(product))
    showCartProducts()
}

function showCartProducts(){
    let total = 0
    let totalBox = document.querySelector('#total')
    let cartItems = document.querySelector('#cartItems')
    cartItems.innerHTML = ''
    totalBox.innerHTML = `Cart is empty`

    for(let i = 1; i <= products.length; i++){
        let product = JSON.parse(localStorage.getItem(`product${i}`))

        if(product){

            total += +product.price
            totalBox.innerHTML = `Total price: ${total} $`
            
            cartItems.innerHTML += `
                <div class="cart-item">
                    <img src="${product.image}">
                    <div class="cart-item-info">
                        <p>${product.name}</p>
                        <p>${product.price} $</p>
                    </div>
                    <i class="fa fa-trash-alt" id="del" onclick="remove(${product.id})"></i>
                    <span>x${product.count}</span>
                    <input type="number" onchange="changeCount(${product.id}, this)" value="${product.count}">
                </div>
            `
        }
    }
}

function changeCount(id, input){
    let product = JSON.parse(localStorage.getItem(`product${id}`))
    product.count = input.value
    product.price = products[id-1]['price'] * product.count
    localStorage.setItem(`product${id}`, JSON.stringify(product))
    showCartProducts()
}

function remove(id){
    localStorage.removeItem(`product${id}`)
    showCartProducts()
}

showCartProducts()
showProducts()