Smetki IP ispit

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .smetka {
           border:  1px solid black;
           display: inline-block;
           width: 150px;
           height: 280px;
           padding: 10px;
           box-sizing: border-box;
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

</head>

<body>
    <p>Систем за сметки</p>
    <p>Име:<input type="text" id="ime"></p>
    <p>Презиме:<input type="text" id="prezime"></p>
    <p>ID:<input type="text" id="id"></p>
    <p>Промет:<input type="text" id="promet"></p>
    <input type="button" onclick="zacuvaj()" value="Зачувај"></input>
    <h2>Vneseni smetki</h2>
    <div id="tabela"></div>

    <h4>Plateni</h4>
    <div id="plateni"></div>


    <script>

        let primer = `[{
        "ime":"Nikola","prezime":"Nikolovski","id":"NNN1asdfgh","promet":"1000"},
        {"ime":"Nikolina","prezime":"Nikolovska","id":"NNN2asdfgh","promet":"3000"}]`

        let smetki = []
        let nizaOdPrimer = JSON.parse(primer)

        for(let i=0 ; i <nizaOdPrimer.length; i++){
            let ime = nizaOdPrimer[i].ime;
            let prezime = nizaOdPrimer[i].prezime;
            // let id=document.getElementById("id").value.toString().toString();
            let id = nizaOdPrimer[i].id;
            let promet = parseInt(nizaOdPrimer[i].promet);

            smetki.push(id)
                    const tabela = document.getElementById('tabela')

                    let bojaKlasa = ''
                    let boja = ''

                    if(promet< 5000) {
                        boja= 'lightgreen'
                        bojaKlasa = 'zelena'
                    } else {
                        boja = 'pink'
                        bojaKlasa = 'crvena'
                    }

                    tabela.innerHTML +=`
                            <div class="smetka" id="${id}" style="background-color:${boja};" >
                                <p>broj: ${random()}</p>
                                <p>Ime: ${ime}</p>
                                <p>Prezime: ${prezime}</p>
                                <p>ID: ${id}</p>
                                <p>Promet: <span class="cena">${promet}</span> </p>
                                <button onclick="platismetka('${id}')" >Plati</button>
                        </div>
                    `

        }


        // aktivni smetki
        function platismetka(id){
            smetki = smetki.filter(ID => ID !== id)

            const smetka = document.getElementById(id)
            const plateniSmetkiDIV = document.getElementById('plateni')
            const smetkaCopy = smetka.cloneNode(true)

            $(smetka).hide()
            smetkaCopy.removeChild(smetkaCopy.getElementsByTagName('button')[0])
            smetkaCopy.style.backgroundColor = 'gray'
            plateniSmetkiDIV.appendChild(smetkaCopy)

        }

        function random() {
            return (Math.floor(Math.random() * 100000) + 1);
        }
        function zacuvaj() {
            let ime = document.getElementById("ime").value;
            let prezime = document.getElementById("prezime").value;
            let id = document.getElementById("id").value;
            let promet = parseInt(document.getElementById("promet").value);

            // Proverka
            let broevi = 0;
            let bukvi = 0;
            const characters = id.length

            for (let i = 0; i < id.length; i++) {
                // proveruva brojki
                if (!isNaN(id[i])) {
                    broevi++;
                }
                // proveruva bukvi
                if (id[i].charCodeAt() >= 65 && id[i].charCodeAt() <= 90) {
                    bukvi++;
                }
            }

            if (characters === 10 && broevi === 1 && bukvi >= 3) {
                const brojNaSmeta =random()

                // proverka za id
                if(!smetki.includes(id)){
                    smetki.push(id)
                    const tabela = document.getElementById('tabela')

                    let boja = ''

                    if(promet< 5000) {
                        boja= 'lightgreen'
                    } else {
                        boja = 'pink'
                    }
                    tabela.innerHTML +=`
                            <div class="smetka" id="${id}" style="background-color:${boja};" >
                                <p>broj: ${brojNaSmeta}</p>
                                Ime:  <p class="ime">${ime}</p>
                                <p>Prezime: ${prezime}</p>
                                <p>ID: ${id}</p>
                                <p>Promet: <span class="cena">${promet}</span> </p>
                                <button onclick="platismetka('${id}')" >Plati</button>
                        </div>
                    `
                } else {
                    const smetkaZaUpdate = document.getElementById(id)
                    const cenaElement = smetkaZaUpdate.getElementsByClassName('cena')[0]
                    const cena = parseInt(cenaElement.innerText)
                    cenaElement.innerHTML = cena + promet
                }

            } else {
                alert('nesto ne e vored')
            }
        }
    </script>

</body>

</html>