<!DOCTYPE html>
<html>

<head>    <title>Complete JavaScript Course</title>   
</head>

<body>   
    <div id="message">Complete JavaScript Course</div>   
    <div>     
        <input type="text" id="addFriend">
        <input type="button" id="addNew" value="Add Friend">
    </div>   
    <table id="output"></table>   
    <script>
        window.onload = build;
        const myArray = ["Laurence", "Mike", "John", "Larry"];
        const message = document.getElementById('message');
        const addNew = document.getElementById('addNew');
        const newInput = document.getElementById('addFriend');
        const output = document.getElementById('output');

        addNew.onclick = function () {
            const newFriend = newInput.value;
            adder(newFriend, myArray.length, 0);
            myArray.push(newFriend);
        }

        function build() {
            myArray.forEach((item, index) => {
                adder(item, index, 0)
            })
        }

        function adder(name, index, counter) {
            const tr = document.createElement('tr');
            const td1 = document.createElement('td');
            td1.classList.add('box');
            td1.textContent = index + 1;
            const td2 = document.createElement('td');
            td2.textContent = name;
            const td3 = document.createElement('td');
            td3.textContent = counter;
            tr.append(td1);
            tr.append(td2);
            tr.append(td3);
            tr.addEventListener('click', (e) => {
                console.log(tr.lastChild);
                let val = Number(tr.lastChild.textContent);
                val++;
                tr.lastChild.textContent = val;
            })
            output.appendChild(tr);
        }




    </script>
</body>

</html>
