Generowanie html po klikneciu w button, dane z fetch api

function createUser(){
        
        let usersTab = [];
        let tabTemplateUser = [];
        let tmp = 0;
        const userWrap = document.getElementById('userWrap');
        const addUserBtn = document.getElementById('addUser');

        function setUserTab(tab){
            usersTab = tab;
        }
        
        function makeTemplate(){
            usersTab.forEach(user =>{
                let template = `
                <div class="userBox" style="margin-top:20px;">
                    <h2>Nazwa: ${user.name}</h2> 
                    <h2>Nazwa użytkownika: ${user.username}</h2>
                    <h2>Email: ${user.email}</h2>
                </div>`

                tabTemplateUser.push(template);

            })
        }
        
        function addUser(){
            userWrap.innerHTML += tabTemplateUser[tmp]
            tmp++
        }

        
        fetch("https://jsonplaceholder.typicode.com/users")
            .then(resp => resp.json())
            .then(json => setUserTab(json))
            .then( () =>  makeTemplate())
            .then( () =>  addUser())   
        
            .catch(function (error) {
                console.log('Request failed', error);
            });

    }

    const addUserBtn = document.getElementById('addUser');
    addUserBtn.addEventListener('click', createUser)

        fetch("https://jsonplaceholder.typicode.com/users")
            .then(resp => resp.json())
            .catch(function (error) {
                console.log('Request failed', error);
            });

let couter = 0;
    
    function createUser(){
        
        console.log('test')
        
        let usersTab = [];
        let tabTemplateUser = [];
        
        const userWrap = document.getElementById('userWrap');
        const addUserBtn = document.getElementById('addUser');

        function setUserTab(tab){
            usersTab = tab;
        }
        
        function makeTemplate(){
            usersTab.forEach(user =>{
                let template = `
                <div class="userBox" style="margin-top:20px;">
                    <h2>Nazwa: ${user.name}</h2> 
                    <h2>Nazwa użytkownika: ${user.username}</h2>
                    <h2>Email: ${user.email}</h2>
                </div>`

                tabTemplateUser.push(template);

            })
        }
        
        function addUser(){
            userWrap.innerHTML += tabTemplateUser[couter]
            couter++
            console.log(couter)
        }

        
        fetch("https://jsonplaceholder.typicode.com/users")
            .then(resp => resp.json())
            .then(json => setUserTab(json))
            .then( (json) =>  makeTemplate())
            .then( (json) =>  addUser())   
        
            .catch(function (error) {
                console.log('Request failed', error);
            });

    }

    const addUserBtn = document.getElementById('addUser');
    addUserBtn.addEventListener('click', createUser)

userWrap.innerHTML += tabTemplateUser[tmp]