<!DOCTYPE html>
<html>
<head> <title>Complete JavaScript Course</title>
</head>
<body>   
    <div id="message">Complete JavaScript Course</div>    <div id="output"></div>   
    <script>     
        window.onload = build;
        const myArray = ["Laurence", "Mike", "John", "Larry", "Kim", "Joanne", "Lisa", "Janet", "Jane"];
        const message = document.getElementById('message');
        function build() {
            let html = "<h1>My Friends Table</h1><table>";
            myArray.forEach((item, index) => {
                html += `<tr data-row="${index}"><td>${item}</td>`;
                html += `<td class="box">${index + 1}</td></tr>`;
            })
            html += '</table>';
            document.getElementById('output').innerHTML = html;
            const boxes = document.querySelectorAll('#output .box');
            boxes.forEach((el) => {
                el.addEventListener('click', (e) => {
                    let par = el.closest('[data-row]')
                    let temp = par.getAttribute('data-row');
                    let tempName = par.firstChild.textContent;
                    message.innerHTML = `${tempName } is in row #${temp}`;
                })
            })
        }
    </script>
</body>
</html>
